An abstracted informational component that can be used to display important messages or warnings to users.
import { Admonition } from '@cerberus/react'The Admonition component is an abstracted informational component that can be used to display important messages or warnings to users. It can be used in various contexts, such as error, success, or informational messages.
The Admonition component can be customized with different color palettes to match the design of your application. You can use: info, action, or any of the state-related palettes.
The Admonition component can be used to display different styles of messages, such as filled (default) or outlined.
You can utilize the primitive components or the css prop to customize the admonition. Each part forwards ref and allows for a asChild prop.
| Component | Description |
|---|---|
| AdmonitionRoot | The container for the parts |
| AdmonitionIndicator | The icon of the admonition |
| AdmonitionContent | The content container of the admonition |
| AdmonitionHeading | The heading of the admonition |
| AdmonitionDescription | The description body of the admonition |
The Admonition component is an abstraction of the primitives and accepts the following props:
| Name | Default | Description |
|---|---|---|
| heading | The heading title of the Admonition. | |
| icon | An alternative icon to display in the Admonition. | |
| palette | page | The color palette of the Admonition. |
| usage | filled | The usage of the Admonition. Can be filled or outlined. |
The AdmonitionParts API is an Object containing the full family of components.
| Name | Description |
|---|---|
| Root | The AdmonitionRoot component which is the container of the family. |
| Indicator | The AdmonitionIndicator component which is the icon of the admonition |
| Content | The AdmonitionContent component which is the container of the admonition |
| Heading | The AdmonitionHeading component which is the heading of the admonition |
| Description | The Admonition component which is the description body of the admonition |
The Parts additionally use the following data attributes:
| Name | Value | Description |
|---|---|---|
data-scope | admonition | The scope of the components. |
data-part | root, indicator, content, heading, description | The part of the component. |
On this page