Admonition

Admonition provides focus for situations that require a callout.

import { Button } from 'ui'
import { Admonition } from 'ui-patterns/admonition'
 
export function AdmonitionDemo() {
  return (
    <Admonition
      type="default"
      layout="horizontal"
      title="OAuth Server is disabled"
      description="Enable OAuth Server to make your project act as an identity provider for
            third-party applications."
      actions={<Button type="default">OAuth Server Settings</Button>}
    />
  )
}

Use Admonition instead of Alert unless you specifically need the primitives. If in doubt, stick with Admonition.

Usage

import { Admonition } from 'ui-patterns/admonition'

<Admonition
  type="default"
  title="Is it accessible?"
  description="Yes. It adheres to the WAI-ARIA design pattern."
/>

Buttons

Style the color of the button based upon the context of the Admonition, not its inherited type. For example, the below warning Admonition has an encouraged action, so its button has type="default". The destructive Admonition has a button that is destructive, so the button has type="danger".

Only ever use the primary (green) button type on a default Admonition. Even then—given that Admonition is an isolated callout—the primary button type should rarely be used.

Examples

Responsive

Resize your browser to see the button(s) change layout based on the Admonition’s width.

When layout="responsive", the Alert root gets @container so the Admonition is the container-query context. The Admonition stays vertical when it’s narrow and switches to horizontal when its own width reaches the @md container breakpoint, independent of page width.

Warning

There are several components that wrap the warning Admonition type with reusable text or functionality. These include:

• AlertError
• NoPermission

AlertError for example rolls up consistent error handling and support contact methods.

Destructive

Sandwiched

Some Card or Dialog instances may need to include callout information in-between core content. Admonition can be used ‘full-bleed’ in these cases by removing borders and radii.

Depending on the context, you may want to reset borders on the Admonition itself rather than the surrounding elements. The above Admonition is type "warning" with stark yellow borders which we want to emphasize.