Paste

Design Systemv0.1

Button

Installation

yarn add @twilio-paste/button

Usage

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

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

Props

PropTypeDescriptionDefault
type?stringIf the button is inside a <form>: use 'submit'. Otherwise use 'button' (default).'button'
as?stringThe HTML tag to replace the default <button> tag.'button'
href?stringA 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'
fullWidthbooleanSets the button width to 100% of the parent container.false
disabled?booleanPrevent actions from firing on this buttonfalse
loading?booleanPrevent actions and show a loading spinnerfalse
onClick?(event: React.MouseEvent<HTMLElement>)null
onMouseDown?(event: React.MouseEvent<HTMLElement>)null
onMouseUp?(event: React.MouseEvent<HTMLElement>)null
onMouseEnter?(event: React.MouseEvent<HTMLElement>)null
onMouseLeave?(event: React.MouseEvent<HTMLElement>)null
onFocus?(event: React.FocusEvent<HTMLElement>)null
onBlur?(event: React.FocusEvent<HTMLElement>)null
aria-expanded?booleanA11y: For accordionsnull
aria-haspopup?{'true', 'dialog', 'menu'}A11y: For modals and menusnull
aria-controls?stringA11y: For modals and menusnull
data-test?stringTo detect the element to run tests against.null