Admonition Overview

---

Description

The Admonition component is a customizable alert or notification box used to draw the user’s attention to important information. It can be used to display warnings, errors, success messages, or other types of notifications.

The component uses different icons and styles based on the palette prop, which can be ‘info’, ‘warning’, ‘danger’, or ‘success’. The palette prop determines the color and the icon of the Admonition.

Admonition Anatomy

1. Icon
2. Content
3. Close Button (optional)

Import

import {
  Admonition,
  AdmonitionHeading,
  AdmonitionText,
} from '@pluralsight/react'

Variations

The admonition component in the provided code has one main variant: palette. The palette variant determines the style of the admonition, and it can take four values: info, success, warning, and danger.

Props

Default

{
  palette: 'info'
}

All Options

Note: those denoted with ? are optional

  {
    palette?: 'info' | 'success' |'warning' | 'danger',
    onClose?: () => void,
  }