Choose a version:

Button

Use this component when you want to provide users the ability to perform specific actions, like saving data.

Anchor to buttonpropsButtonProps

ButtonBaseProps | ButtonAnchorProps

ButtonAnchorProps

href

string

required

The URL to link to. If set, it will navigate to the location specified by href after executing the onClick callback.

to

string

Alias for href If set, it will navigate to the location specified by to after executing the onClick callback.

download

string | boolean

Tells browsers to download the linked resource instead of navigating to it. Optionally accepts filename value to rename file.

target

"_blank" | "_self"

Default: '_self'

Specifies where to display the linked URL

onClick

() => void

Callback when a link is pressed. If href is set, it will execute the callback and then navigate to the location specified by href.

onPress

() => void

Alias for onClick Callback when a link is pressed. If href is set, it will execute the callback and then navigate to the location specified by href.

id

string

A unique identifier for the button.

disabled

boolean

Disables the button, disallowing any interaction.

variant

"primary" | "secondary" | "tertiary"

Changes the visual appearance of the Button.

tone

"critical" | "default"

Sets the color treatment of the Button.

language

string

Indicate the text language. Useful when the text is in a different language than the rest of the page. It will allow assistive technologies such as screen readers to invoke the correct pronunciation. Reference of values ("subtag" label)

lang

string

Alias for language

onBlur

() => void

Callback when focus is removed.

onFocus

() => void

Callback when input is focused.

ButtonBaseProps

accessibilityRole

Extract<, 'submit' | 'button' | 'reset'>

Sets the semantic meaning of the component’s content. When set, the role will be used by assistive technologies to help users navigate the page.

id

string

A unique identifier for the button.

disabled

boolean

Disables the button, disallowing any interaction.

variant

"primary" | "secondary" | "tertiary"

Changes the visual appearance of the Button.

tone

"critical" | "default"

Sets the color treatment of the Button.

language

string

Indicate the text language. Useful when the text is in a different language than the rest of the page. It will allow assistive technologies such as screen readers to invoke the correct pronunciation. Reference of values ("subtag" label)

lang

string

Alias for language

onClick

() => void

Callback when a link is pressed. If href is set, it will execute the callback and then navigate to the location specified by href.

onPress

() => void

Alias for onClick Callback when a button is pressed. If href is set, it will execute the callback and then navigate to the location specified by href.

onBlur

() => void

Callback when focus is removed.

onFocus

() => void

Callback when input is focused.

Was this section helpful?