Docs
Admonition

Admonition

Displays a callout for user attention.

Admonition provides focus for situations that require a callout. Use this instead of Alert unless you specifically need the primitives.

Loading...
import Link from 'next/link'
import { Button } from 'ui'
import { Admonition } from 'ui-patterns/admonition'
 
export function AdmonitionDemo() {
  return (
    <Admonition
      type="default"
      layout="horizontal"
      className="mb-12 [&>div]:!translate-y-0"
      title="OAuth Server is disabled"
      description="Enable OAuth Server to make your project act as an identity provider for
            third-party applications."
      actions={
        <Button asChild type="default">
          <Link
            href={`/`}
            onClick={(e) => e.preventDefault()} // Just for demo
          >
            OAuth Server Settings
          </Link>
        </Button>
      }
    />
  )
}

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".

Loading...

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

Loading...

Warning

Loading...

Destructive

Loading...
PreviousIntroduction
NextAssistant Chat