Button
A button allows a user to perform an action, with mouse, touch, and keyboard interactions.
Preview
Code
Examples
Disabled
Preview
Code
Icon button
Preview
Code
Intent: Error
Preview
Code
Intent: Success
Preview
Code
Intent: Warning
Preview
Code
Slot (left)
Preview
Code
Slot (right)
Preview
Code
Props
Name | Type | Default |
|---|---|---|
intent | Intent | — |
isDestructive | boolean | — |
isIcon | boolean | — |
slotLeft | Element | — |
slotRight | Element | — |
variant | "primary" | "secondary" | "tertiary" | — |
form | string | — |
formAction | string | — |
formEncType | string | — |
formMethod | string | — |
formNoValidate | boolean | — |
formTarget | string | — |
name | string | — |
value | string | — |
isPending | boolean | — |
isDisabled | boolean | — |
onPress | ((e: PressEvent) => void) | — |
onPressStart | ((e: PressEvent) => void) | — |
onPressEnd | ((e: PressEvent) => void) | — |
onPressChange | ((isPressed: boolean) => void) | — |
onPressUp | ((e: PressEvent) => void) | — |
onClick | ((e: MouseEvent<FocusableElement, MouseEvent>) => void) | — |
autoFocus | boolean | — |
onFocus | ((e: FocusEvent<Element, Element>) => void) | — |
onBlur | ((e: FocusEvent<Element, Element>) => void) | — |
onFocusChange | ((isFocused: boolean) => void) | — |
onKeyDown | ((e: KeyboardEvent) => void) | — |
onKeyUp | ((e: KeyboardEvent) => void) | — |
id | string | — |
type | "button" | "submit" | "reset" | 'button' |
preventFocusOnPress | boolean | — |
excludeFromTabOrder | boolean | — |
onHoverStart | ((e: HoverEvent) => void) | — |
onHoverEnd | ((e: HoverEvent) => void) | — |
onHoverChange | ((isHovering: boolean) => void) | — |
slot | string | null | — |
children | ReactNode | ((values: ButtonRenderProps & { defaultChildren: ReactNode; }) => ReactNode) | — |
className | string | ((values: ButtonRenderProps & { defaultClassName: string; }) => string) | — |
style | CSSProperties | ((values: ButtonRenderProps & { defaultStyle: CSSProperties; }) => CSSProperties) | — |
ref | ForwardedRef<HTMLButtonElement> | — |