Button
Common buttons prompt most actions in a UI
import { Button, ButtonParts } from '@cerberus/react'Usage
With Icon
To display an icon, you can use the ButtonParts.Icon component.
Pending
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.
Sizes
The Button component comes in two sizes: sm, md. You can set the size by using the size prop.
As Child
The Button component can be used as a child component. This is useful when you want to use the button styles on a different element.
Primitives
You can utilize the primitive components to customize the button.
| Component | Description |
|---|---|
| Button | The context provider for the Button parts |
| ButtonIcon | The icon/spinner of the button |
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. |
| 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. |
Parts
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. |
import { Button, ButtonParts } from '@cerberus/react'Usage
With Icon
To display an icon, you can use the ButtonParts.Icon component.
Pending
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.
Sizes
The Button component comes in two sizes: sm, md. You can set the size by using the size prop.
As Child
The Button component can be used as a child component. This is useful when you want to use the button styles on a different element.
Primitives
You can utilize the primitive components to customize the button.
| Component | Description |
|---|---|
| Button | The context provider for the Button parts |
| ButtonIcon | The icon/spinner of the button |
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. |
| 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. |
Parts
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. |
import { Button, ButtonParts } from '@cerberus/react'Usage
With Icon
To display an icon, you can use the ButtonParts.Icon component.
Pending
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.
Sizes
The Button component comes in two sizes: sm, md. You can set the size by using the size prop.
As Child
The Button component can be used as a child component. This is useful when you want to use the button styles on a different element.
Primitives
You can utilize the primitive components to customize the button.
| Component | Description |
|---|---|
| Button | The context provider for the Button parts |
| ButtonIcon | The icon/spinner of the button |
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. |
| 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. |
Parts
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. |
import { Button, ButtonParts } from '@cerberus/react'Usage
With Icon
To display an icon, you can use the ButtonParts.Icon component.
Pending
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.
Sizes
The Button component comes in two sizes: sm, md. You can set the size by using the size prop.
As Child
The Button component can be used as a child component. This is useful when you want to use the button styles on a different element.
Primitives
You can utilize the primitive components to customize the button.
| Component | Description |
|---|---|
| Button | The context provider for the Button parts |
| ButtonIcon | The icon/spinner of the button |
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. |
| 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. |
Parts
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. |