Import
import { Button } from '@cerberus/react'Usage
With Icon
To display an icon, use the ButtonParts API.
Note
When using the pending prop, the icon will be replaced with a spinner.
Pending
To display a loading state, use the ButtonParts.Icon and set the pending prop to true.
Shapes
Use the shape prop to set the shape of the button. The Button component comes in three shapes: default, sharp and rounded.
Usage
Use the usage prop to set the usage style of the button. The Button component comes in three usage styles: filled, outlined, and ghost.
Sizes
Use the size prop to change the Button size. The options are xs up to 2xl.
Group
You can group buttons together using the ButtonGroup component.
Attached Button Group
You can create an attached button group by setting the layout prop to attached.
Primitives
You can utilize the primitive components or the css prop to customize the button.
| Component | Description |
|---|---|
Button.Root | The context provider for the Button parts |
Button.Icon | The icon/spinner of the button |
Global Customization
To enable global customization, you can modify the theme configuration in your panda.config.ts file. For example, to customize the button component globally:
This change will set the default shape variant of all buttons to default.
API
Props
The Button component is an abstraction of the primitives and accepts the following props:
| Name | Default | Description |
|---|---|---|
palette | action | The color palette (any of the Cerberus palettes) of the button. |
usage | filled | The style treatment of the button. |
shape | sharp | The shape of the button. |
size | lg | The size of the Button. |
pending | false | The loading state of the button. When a button has an Icon it will replace it with a spinner. When not, is shows a disabled state. |
asChild | Render the Button as the child component. |
ButtonGroup Props
| Name | Default | Description |
|---|---|---|
layout | default | The layout of the button group. Can be default or attached. |
shape | sharp | The shape of the buttons in the group. Should match the shape prop of the Button components used. |