import { Button, ButtonParts, ButtonGroup } from '@cerberus/react'To display an icon, you can use the ButtonParts.Icon component.
To display a loading state, use the ButtonParts.Icon and set the pending prop to true. This will show a spinner in place of the icon.
The Button component comes in two shapes: sharp and rounded. You can set the shape by using the shape prop.
The Button component comes in three usage styles: filled, outlined, and ghost. You can set the usage by using the usage prop.
The Button component comes in two sizes: sm, md. You can set the size by using the size prop.
You can group buttons together using the ButtonGroup component.
You can create an attached button group by setting the layout prop to attached.
You can utilize the primitive components or the css prop to customize the button.
| Component | Description |
|---|---|
| Button | The context provider for the Button parts |
| ButtonIcon | The icon/spinner of the button |
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. |
| 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. |
| 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. |
The ButtonParts API is an Object containing the full family of components.
| Name | Description |
|---|---|
| Root | The Button component which is the Provider for the family. |
| Icon | The ButtonIcon component which dynamically replaces an icon with a Spinner when the state is pending. |
On this page