@leafygreen-ui/button
leafyGreen UI Kit Button
Last updated a month ago by michael.mitchell .
Apache-2.0 · Original npm · Tarball · package.json
$ cnpm install @leafygreen-ui/button 
SYNC missed versions from official npm registry.

Button

npm (scoped)

View on Storybook

Installation

Yarn

yarn add @leafygreen-ui/button

NPM

npm install @leafygreen-ui/button

Peer Dependencies

Package Version
@leafygreen-ui/leafygreen-provider ^1.1.0

Example

import Button from '@leafygreen-ui/button';

<Button
  variant="primary"
  className="create-item-button"
  title="Create an item"
  onClick={event => {
    /* Something to handle the click event */
  }}
>
  Submit
</Button>;

Output HTML

<button
  class="css-1rgbgdt create-item-button"
  title="Create an item"
  disabled="false"
>
  Submit
</button>

Properties

Prop Type Description Default
variant 'default' | 'primary' | 'info' | 'danger' | 'dark' Sets the style variant of the button. 'default'
darkMode boolean Determines if the component renders in dark mode false
size 'xsmall' | 'small' | 'normal' | 'large' Sets the size variant of the button. 'normal'
children node The content that will appear inside of the <Button /> component. null
onClick function The event handler function for the 'onclick' event. Receives the associated event object as the first argument.
borderRadius string Specify the border radius of the button. The string format is that which can be passed directly to a border-radius CSS property. '3px'
className string Adds a className to the class attribute. ''
value string Sets the HTML value attribute.
disabled boolean Disabled the button false
as React.ElementType Determines the root element. For example, Link or a tags can be supplied to replace button from being the DOM element that wraps the component. button
href string If a href is supplied it will change the as value, such that the component renders inside of an a tag instead of inside of a button tag.
glyph React.ReactElement When supplied a rendered Icon, renders a button with the specified glyph on the left-side of the content, and adjusts Button padding accordingly.
forceState { focused?: boolean, active?: boolean } Force the component to display the specified interaction states.
... React.ComponentPropsWithRef<[as]> Any other properties will be spread on the root element

Note: In order to make this Component act as a submit button, the recommended approach is to pass submit as the type prop. Note it is also valid to pass input to the as prop, and the button's content's to the value prop -- in this case, do not supply children to the component.

Current Tags

  • 10.0.1                                ...           latest (a month ago)

39 Versions

  • 10.0.1                                ...           a month ago
  • 10.0.0                                ...           2 months ago
  • 9.0.0                                ...           2 months ago
  • 8.0.1                                ...           3 months ago
  • 8.0.0                                ...           3 months ago
  • 7.0.1                                ...           4 months ago
  • 7.0.0                                ...           4 months ago
  • 6.0.2                                ...           5 months ago
  • 6.0.1                                ...           6 months ago
  • 6.0.0                                ...           6 months ago
  • 5.0.2                                ...           6 months ago
  • 5.0.1                                ...           6 months ago
  • 5.0.0                                ...           7 months ago
  • 4.2.5                                ...           7 months ago
  • 4.2.4                                ...           8 months ago
  • 4.2.3                                ...           9 months ago
  • 4.2.2                                ...           9 months ago
  • 4.2.1                                ...           9 months ago
  • 4.2.0                                ...           9 months ago
  • 4.1.1                                ...           10 months ago
  • 4.1.0                                ...           a year ago
  • 4.0.0                                ...           a year ago
  • 3.0.2                                ...           a year ago
  • 3.0.1                                ...           a year ago
  • 3.0.0                                ...           a year ago
  • 2.3.7                                ...           a year ago
  • 2.3.6                                ...           a year ago
  • 2.3.5                                ...           a year ago
  • 2.3.4                                ...           a year ago
  • 2.3.3                                ...           a year ago
  • 2.3.2                                ...           2 years ago
  • 2.3.1                                ...           2 years ago
  • 2.3.0                                ...           2 years ago
  • 2.2.6                                ...           2 years ago
  • 2.2.5                                ...           2 years ago
  • 2.2.4                                ...           2 years ago
  • 2.2.3                                ...           2 years ago
  • 2.2.2                                ...           2 years ago
  • 2.2.1                                ...           2 years ago

Copyright 2014 - 2017 © taobao.org |