Button

Installation

yarn add @twilio-paste/button

Usage

import {Button} from '@twilio-paste/button';

<Button variant="secondary" size="small" onClick={() => {}}>
  Submit
</Button>;

Props

| Prop | Type | Description | Default | | -------------- | -------------------------------------- | ----------------------------------------------------------------------------------- | --------- | | type? | string | If the button is inside a <form>: use 'submit'. Otherwise use 'button' (default). | 'button' | | as? | string | The HTML tag to replace the default <button> tag. | 'button' | | href? | string | A URL to route to. Must use as="a" for this prop to work. | null | | variant? | ButtonVariants | 'primary', 'secondary', 'destructive', 'destructive_link', 'link', 'reset' | 'primary' | | size? | ButtonSizes | 'default', 'small', 'icon', 'reset' | 'default' | | fullWidth | boolean | Sets the button width to 100% of the parent container. | false | | disabled? | boolean | Prevent actions from firing on this button | false | | loading? | boolean | Prevent actions and show a loading spinner | false | | onClick? | (event: React.MouseEvent) | | null | | onMouseDown? | (event: React.MouseEvent) | | null | | onMouseUp? | (event: React.MouseEvent) | | null | | onMouseEnter? | (event: React.MouseEvent) | | null | | onMouseLeave? | (event: React.MouseEvent) | | null | | onFocus? | (event: React.FocusEvent) | | null | | onBlur? | (event: React.FocusEvent) | | null | | aria-expanded? | boolean | A11y: For accordions | null | | aria-haspopup? | {'true', 'dialog', 'menu'} | A11y: For modals and menus | null | | aria-controls? | string | A11y: For modals and menus | null | | data-test? | string | To detect the element to run tests against. | null |

Changes from react-components-button

• The btnStyle prop is renamed to variant. The new values are:
  • "primary" (blue, filled)
  • "secondary" (blue, outlined)
  • "destructive" (red, filled)
  • "destructive_link" (a red link)
  • "link" (a blue link)
  • "reset" (all default styles removed)
• The btnSize prop is renamed to size. The new values are:
  • "default" (normal size, grows to content)
  • "small" (less padding than auto, grows to content)
  • "icon" (used for icon buttons only, balanced padding on all sides)
  • "reset" (no padding or any additional sizing is applied)
• The ButtonPlus component has been deprecated.
• Our new button component can be used as a link.