Button

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

Installation

yarn add @twilio-paste/button - or - yarn add @twilio-paste/core

Usage

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

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

Props

Button

variant RequiredRequired

The different appearance variants for a button. Avoid using link variants when possible.

Type: | "reset" | "primary" | "primary_icon" | "secondary" | "secondary_icon" | "destructive" | "destructive_icon" | "destructive_link" | "destructive_secondary" | "link" | "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: any
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'