Skip to content

Admonitions (tip boxes)

Laura Kalbag edited this page May 23, 2023 · 1 revision

Admonitions are a way to draw attention to special types of content including tips and warnings. These boxes have borders, background colors and icons representing the type of content.

Default admonitions

These admonitions come default with Docusaurus, but have custom markup and styling.

Tip

The tip icon has a bulb icon and a grey background.

:::tip

This is a tip admonition with no heading.

:::

Caution

The caution tip has an exclamation icon and an orange background.

:::caution

## Warning

This is a caution admonition with an h2 heading.

:::

Note

The note tip has a paperclip icon and a grey background.

:::note

This is a note admonition with no heading.

:::

Danger

The danger tip has a warning icon and a red background.

:::danger

### Danger

This is a danger admonition with an h3 heading.

:::

Info

The info tip has an i icon and a grey background.

:::info

This is an info admonition with no heading.

:::

Stately custom admonitions

These are custom admonitions created for Stately.

Stately/Studio

The Studio tip has a Stately icon and a grey background.

:::studio

This is a studio admonition with no heading.

:::

XState

The XState tip has an XState icon and a blue background.

:::xstate

## How its done in XState

This is an XState admonition with an h2 heading.

:::

The XState warning has an XState icon and a red background.

:::warningxstate

## XState v5 Alpha

`X feature` is only available in XState version 5. [Check out XState v5 Alpha on NPM](https://www.npmjs.com/package/xstate/v/5.0.0-alpha.1).

:::

TypeScript

The TypeScript tip has the TypeScript icon and a blue background.

:::typescript

This is a TypeScript admonition with no heading.

:::

New

The New tip has a party popper icon and a green background.

:::new

This is a new admonition with no heading.

:::

Video

The video tip has a play icon and a grey background.

:::video

This is a video admonition with no heading.

:::