# astro-better-admonitions

Extensible callout boxes and inline badges for Astro MDX.

> For the index of this section of the site, see [llms.txt](https://lambdalatitudinarians.org/llms.txt)

# 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](https://www.npmjs.com/package/astro-better-admonitions)

## Installation

```shell-session
$ npm install astro-better-admonitions
```

Import the CSS in your global stylesheet:

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

## Usage

```jsx
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:

```jsx
---
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.