Button

Buttons are used to trigger actions, such create, edit, or delete.

Effective Practices

When using buttons, consider the following best practices:

• Be clear, concise and accurate. Use specific verbs, such as “Save” or “Discard”.
• Lead with a verb, such as “Save changes” or “Discard changes”.
• Use color appropriately, such as “danger (red)” for destructive actions and “primary (blue)” for important actions.
• Avoid using more than one danger or primary action in a section, as it may cause confusion.
• Minimize the number of actions. Too many actions can cause confusion.
• Use actions consisently throughout the interface.

Usage Guidelines

Use combinations of color, size and variant to create buttons that fit your needs, provide the right visual weight, and guide your users.

We’ve provided a few examples to get you started.

Colors

primary
Use to signal the most importand action in the experience. Do not use more than one primary button in a section as it may cause confusion.

<Button color="primary">Create user</Button>

secondary
Use for most actions unless more or less visual weight is required. This is the default color.

• For more visual weight, consider using a primary or danger intent.
• For less visual weight, consider using a link or outline variant.

<Button color="secondary">Sync profile</Button>

danger
Use to signal a destructive or dangerous action. Use with caution. Overuse can minimize the impact of the danger buttons.

<Button color="danger">Delete user</Button>

Sizes

xxs
Use when space is extremely limited, such as a dropdown or menu.

<Button size="xxs">Sync profile</Button>

xs
Use when space is limited, such as a table or list.

<Button size="xs">Sync profile</Button>

sm
Use for less important actions or when space is limited.

<Button size="sm">Sync profile</Button>

md
Use for most actions. This is the default size.

<Button size="md">Sync profile</Button>

Variants

solid
Use when you want to provide more visual weight to the button. This is the default variant.

<Button variant="solid">Edit user</Button>

outline
Use when you want to provide less visual weight to the button.

<Button variant="outline">Sync profile</Button>

link
Use when you want to de-emphasize the button, giving it the appeance of a text link. Useful for actions like cancel.

<Button variant="link">Cancel</Button>

Props

interface ButtonProps

color? "danger" | "primary" | "secondary" | null

Changes the color of the button to signal the intent of its action.

fullWidth? boolean | null

Renders a full-width button.

size? "sm" | "md" | "xs" | "xxs" | null

Sets the size of the button.

variant? "link" | "solid" | "outline" | null

Changes the appearance of the button.

form? string

The <form> element to associate the button with. The value of this attribute must be the id of a <form> in the same document.

formAction? string

The URL that processes the information submitted by the button. Overrides the action attribute of the button's form owner.

formEncType? string

Indicates how to encode the form data that is submitted.

formMethod? string

Indicates the HTTP method used to submit the form.

formNoValidate? boolean

Indicates that the form is not to be validated when it is submitted.

formTarget? string

Overrides the target attribute of the button's form owner.

name? string

Submitted as a pair with the button's value as part of the form data.

value? string

The value associated with the button's name when it's submitted with the form data.

isDisabled? boolean

Whether the button is disabled.

onPress? (e: PressEvent) => void

Handler that is called when the press is released over the target.

onPressStart? (e: PressEvent) => void

Handler that is called when a press interaction starts.

onPressEnd? (e: PressEvent) => void

Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.

onPressChange? (isPressed: boolean) => void

Handler that is called when the press state changes.

onPressUp? (e: PressEvent) => void

Handler that is called when a press is released over the target, regardless of whether it started on the target or not.

autoFocus? boolean

Whether the element should receive focus on render.

onFocus? (e: FocusEvent) => void

Handler that is called when the element receives focus.

onBlur? (e: FocusEvent) => void

Handler that is called when the element loses focus.

onFocusChange? (isFocused: boolean) => void

Handler that is called when the element's focus status changes.

onKeyDown? (e: KeyboardEvent) => void

Handler that is called when a key is pressed.

onKeyUp? (e: KeyboardEvent) => void

Handler that is called when a key is released.

type? "button" | "submit" | "reset"

The behavior of the button when used in an HTML form.

excludeFromTabOrder? boolean

Whether to exclude the element from the sequential tab order. If true, the element will not be focusable via the keyboard by tabbing. This should be avoided except in rare scenarios where an alternative means of accessing the element or its functionality via the keyboard is available.

id? string

The element's unique identifier. See MDN.

onHoverStart? (e: HoverEvent) => void

Handler that is called when a hover interaction starts.

onHoverEnd? (e: HoverEvent) => void

Handler that is called when a hover interaction ends.

onHoverChange? (isHovering: boolean) => void

Handler that is called when the hover state changes.

slot? string | null

A slot name for the component. Slots allow the component to receive props from a parent component. An explicit null value indicates that the local props completely override all props received from a parent.

children? (values: ButtonRenderProps) => ReactNode

The children of the component. A function may be provided to alter the children based on component state.

className? (values: ButtonRenderProps) => string

The CSS className for the element. A function may be provided to compute the class based on component state.

style? (values: ButtonRenderProps) => CSSProperties

The inline style for the element. A function may be provided to compute the style based on component state.