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 used to display static messagesto 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 any of the state-related palettes
along with page.
Use the usage prop to display the admonition in a different style. The options
are filled (default) and outlined.
You can utilize the primitive components or style props to customize the admonition.
| 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 | The part of the component. |
data-part | indicator | The part of the component. |
data-part | content | The part of the component. |
data-part | heading | The part of the component. |
data-part | description | The part of the component. |
On this page
import { Box } from '@/styled-system/jsx'
import { Admonition } from '@cerberus/react'
export function BasicDemo() {
return (
<Box w="3/4">
<Admonition heading="Note">
This is a note admonition that is commonly use to display a page-level informational
message.
</Admonition>
</Box>
)
}
import { Stack } from '@/styled-system/jsx'
import { Admonition, type AdmonitionProps, For } from '@cerberus/react'
export function PaletteDemo() {
const palettes: AdmonitionProps['palette'][] = ['page', 'info', 'success', 'warning', 'danger']
return (
<Stack w="3/4">
<For each={palettes}>
{(palette) => (
<Admonition key={palette} heading="Heading" palette={palette}>
This is a {palette} admonition.
</Admonition>
)}
</For>
</Stack>
)
}
import { Stack } from '@/styled-system/jsx'
import { Admonition, type AdmonitionProps, For } from '@cerberus/react'
export function UsageDemo() {
const palettes: AdmonitionProps['palette'][] = ['page', 'info', 'success', 'warning', 'danger']
return (
<Stack w="3/4">
<For each={palettes}>
{(palette) => (
<Admonition key={palette} heading="Heading" palette={palette} usage="outlined">
This is a {palette} admonition.
</Admonition>
)}
</For>
</Stack>
)
}
import PawIcon from '@/app/components/icons/paw-icon'
import { Box, Circle } from '@/styled-system/jsx'
import { AdmonitionParts } from '@cerberus/react'
export function CustomDemo() {
return (
<Box w="3/4">
<AdmonitionParts.Root
css={{
transform: 'skewX(-10deg)',
}}
>
<AdmonitionParts.Indicator>
<Circle size="6">
<PawIcon />
</Circle>
</AdmonitionParts.Indicator>
<AdmonitionParts.Content>
<AdmonitionParts.Heading
css={{
color: 'danger.text.initial',
textTransform: 'uppercase',
}}
>
Cerberus Forever
</AdmonitionParts.Heading>
<AdmonitionParts.Description>
President's are temporary, but Cerberus is forever.
</AdmonitionParts.Description>
</AdmonitionParts.Content>
</AdmonitionParts.Root>
</Box>
)
}