Button

Used to trigger actions or events.

1
import { Button, ButtonParts, ButtonGroup } from '@cerberus/react'

Basic Usage

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