Skip to contentSkip to navigationSkip to topbar
Paste
FigmaStar

Button

Version 14.1.0GithubStorybook

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

Installation

Installation page anchor
yarn add @twilio-paste/button - or - yarn add @twilio-paste/core

Usage

Usage page anchor
import {Button} from '@twilio-paste/core/button';

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

Props

Props page anchor

Button

Button page anchor

variant RequiredRequired

Type
| "link" | "reset" | "primary" | "primary_icon" | "secondary" | "secondary_icon" | "destructive" | "destructive_icon" | "destructive_link" | "destructive_secondary" | "inverse_link" | "inverse"
Default
'primary'

as

The HTML tag to replace the default <button> tag.

Type
keyof IntrinsicElements
Default
'button'

disabled

Prevent actions from firing on this Button

Type
boolean

element

Overrides the default element name to apply unique styles with the Customization Provider.

Type
string
Default
'BUTTON'

fullWidth

Sets the Button width to 100% of the parent container.

Type
boolean

href

A URL to route to. Must use as="a" for this prop to work.

Type
string
Default
null

i18nExternalLinkLabel

Title for showExternal icon

Type
string
Default
'(link takes you to an external page)'

loading

Prevent actions and show a loading spinner

Type
boolean

pressed

Sets the aria-pressed attribute. Must be used with 'secondary' or 'secondary_icon' variants.

Type
boolean

size

Type
ButtonSizes
Default
'default'

tabIndex

Type
ButtonTabIndexes

target

Type
string

type

Use at least one submit button per <form>. Outside of forms use button (default).

Type
ButtonTypes
Default
'button'