@twilio-paste/button NPM

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.

deepmerge

@everything-registry/sub-chunk-942 @infinitebrahmanuniverse/nolb-_tw @twilio-alpha/assistants-react @twilio-paste/core @zalastax/nolb-_tw

4 months ago

1 year ago

12 months ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago