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

With actions

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