astro-better-admonitions

Callout boxes (note, tip, caution, warning, danger) and inline badge components for MDX. All types are configurable, and new types can be added.

Current version: 0.1.1 --npm

Installation

$ npm install astro-better-admonitions

Import the CSS in your global stylesheet:

@import "astro-better-admonitions/style.css";

Usage

import { Admonition } from 'astro-better-admonitions';

<Admonition type="note">
  Use notes for supplementary information that does not block the reader.
</Admonition>

<Admonition type="tip">
  Tips highlight helpful shortcuts or best practices.
</Admonition>

<Admonition type="caution">
  Caution boxes warn about actions that could cause problems.
</Admonition>

<Admonition type="danger">
  Dangers indicate something spicy that will definitely cause issues if ignored.
</Admonition>

<Admonition type="other">
  You can specify any other type name for a generic appearance.
</Admonition>

<Admonition type="other" title="my unique admonition">
  You can specify a title on any of these to override the default, which uses the type name (built-in types get a leading capital letter, but can still be overridden).
</Admonition>

Live examples

Note

Use notes for supplementary information that does not block the reader.

Tip

Tips highlight helpful shortcuts or best practices.

Caution

Caution boxes warn about actions that could cause problems.

Danger

Dangers indicate something spicy that will definitely cause issues if ignored.

Other

You can specify any other type name for a generic appearance.

my unique admonition

You can specify a title on any of these to override the default, which uses the type name (built-in types get a leading capital letter, but can still be overridden).

Props

Prop	Type	Default	Description
`type`	`string`	`note`	Callout type: `note`, `tip`, `caution`, `warning`, or a custom type
`title`	`string`	—	Callout heading (defaults to the type label)

Custom types

Pass a types prop with additional type configs to add new callout types:

---
import { Admonition } from 'astro-better-admonitions';
const customTypes = {
  important: { label: 'Important', color: '#7c3aed' },
};
---
<Admonition type="important" title="Important" types={customTypes}>
  This is a custom callout.
</Admonition>

The color property sets the left border and icon color.