Button
A versatile button component for triggering actions and navigation.
Usage
The Button component is used to trigger actions when clicked or pressed.
Basic Example
Size Examples
Here are examples of the Button with different sizes:
Variant Examples
Here are examples of different button variants:
Color Examples
Here are examples of the Button with different colors:
Button Groups
Buttons can be grouped together using the Group component for related actions:
Basic Button Group
Icon Button Group
Selected State Group
Variant Groups
Disabled State
Props
| Prop | Type | Default |
|---|---|---|
pressable? | boolean | true |
hitSlop? | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "none" | "3xs" | - |
focusable? | boolean | true |
onHoverChange? | ((isHovering: boolean) => void) | - |
onHoverEnd? | ((e: HoverEvent) => void) | - |
onHoverStart? | ((e: HoverEvent) => void) | - |
isPending? | boolean | - |
excludeFromTabOrder? | boolean | - |
preventFocusOnPress? | boolean | - |
onFocusChange? | ((isFocused: boolean) => void) | - |
onPressUp? | ((e: PressEvent) => void) | - |
onPressChange? | ((isPressed: boolean) => void) | - |
onPressEnd? | ((e: PressEvent) => void) | - |
onPressStart? | ((e: PressEvent) => void) | - |
onPress? | ((e: PressEvent) => void) | - |
isDisabled? | boolean | - |
layout? | LayoutOptions | - |
stretch? | boolean | false |
size? | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | Partial<Record<"xs" | "sm" | "md" | "lg" | "xl" | "default", "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl">> | - |
variant? | "transparent" | "solid" | "outlined" | "soft" | - |
shadow? | "sm" | "md" | "lg" | "none" | - |
radius? | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "none" | "3xs" | "round" | - |
bleedY? | boolean | true |
bleedX? | boolean | false |
Edit on GitHub
Last updated on