Admonition
Page level informational messages
- Can contain an optional leading icon based Avatar
- Two types: filled and outlines
- Keep headings concise and in sentence-case
- Descriptions should not exceed 2 lines
Example
Resources
| Name | Resource | Status |
|---|---|---|
| Figma | Design Kit (Figma) | Private |
On this page
Usage
- Used in places like:
- Layouts
- Forms
Filled Admonitions
Used as a product level notification or highlighted information that is not specific to a users task. It can not be dismissed unless the system handles it or the user takes an action to handle it.
Outline Admonitions
Filled Admonitions are used by default for most use cases, while outlined are to be used for lower emphasis pieces of information that don't need to be highlighted over other UI elements on the page.
Responsive Layouts
When scaling layouts for large screen devices, admonitions can adapt their visual presentation, alignment, and arrangement to fit different contexts and user needs.
On this page
import { Admonition, AdmonitionHeading, AdmonitionDescription} from '@cerberus/react'Usage
Customization
API
Admonition
export type AdmonitionProps = HTMLAttributes<HTMLDivElement> & AdmonitionVariantProps & { icon?: ReactNode }
define function Admonition(props: AdmonitionProps): ReactNodeProps
The Admonition component accepts the following props:
| Name | Default | Description |
|---|---|---|
| palette | action | The color palette of the button. |
| usage | filled | The style treatment of the button. |
| icon | null | The icon to replace the default status ones. |
AdmonitionHeading
type AdmonitionHeadingProps = HTMLAttributes<HTMLParagraphElement> & AdmonitionVariantProps
define function AdmonitionHeading(props: AdmonitionHeadingProps): ReactNodeProps
The AdmonitionHeading component accepts the following props:
| Name | Default | Description |
|---|---|---|
| palette | action | The color palette of the button. |
| usage | filled | The style treatment of the button. |
AdmonitionDescription
type AdmonitionDescriptionProps = HTMLAttributes<HTMLParagraphElement> & AdmonitionVariantProps
define function AdmonitionDescription(props: AdmonitionProps): ReactNodeProps
The AdmonitionDescription component accepts the following props:
| Name | Default | Description |
|---|---|---|
| palette | action | The color palette of the button. |
| usage | filled | The style treatment of the button. |
On this page
Use Cases
- Users should be able to:
- Navigate to and activate links with assistive tech (i.e., focus)
Interaction & Style
Similarly styled components shouldn't be used together if they don't each pass the 3:1 contrast ratio. Higher contrast helps differentiate between a group of similar components.
Keyboard Navigation
| Keys | Actions |
|---|---|
| Tab | Focus lands on (non-disabled) links |
| Space / Enter | Activates the (non-disabled) links |
On this page