@twilio-paste/button

A Button is a clickable element which communicates that users can trigger an action.

Usage no npm install needed!

<script type="module">
  import twilioPasteButton from 'https://cdn.skypack.dev/@twilio-paste/button';
</script>

README

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.