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 } from '@cerberus/react'Usage
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.
Palette
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.
Usage
The Admonition component can be used to display different styles of messages, such as filled (default) or outlined.
Primitives
You can utilize the primitive components 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 |
API
Props
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. |
Parts
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
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