Aside component

To display secondary information alongside a page’s main content, use the <Aside> component.

It is a wrapper over built-in Callout components provided by Mintlify, but with a unified interface and a way to specify a title.

Import

import { Aside } from '/snippets/aside.jsx';

Usage

Display an aside (also known as “admonitions” or “callouts”) using the <Aside> component.

An <Aside> can have an optional type attribute, which controls the aside’s color, icon, and default title.

import { Aside } from '/snippets/aside.jsx';

<Aside>Some content in an aside.</Aside>

<Aside type="caution">Some cautionary content.</Aside>

<Aside type="tip">

  Other content is also supported in asides.

  ```js
  // A code snippet, for example.
  ```

</Aside>

<Aside type="danger">Do not give your password to anyone.</Aside>

Use custom titles

Override the default aside titles by using the title attribute.

Watch out!

import { Aside } from '/snippets/aside.jsx';

<Aside type="caution" title="Watch out!">
  A warning aside _with_ a custom title.
</Aside>

<Aside> props

Implementation: aside.jsx

The <Aside> component accepts the following props:

type

type: "note" | "tip" | "caution" | "danger"
default: "note"

The type of aside to display:

• note asides (the default) are blue and display an information icon.
• tip asides are purple and display a rocket icon.
• caution asides are yellow and display a triangular warning icon.
• danger asides are red and display an octagonal warning icon.

Passing a different, unrecognized type resets the type to danger and replaces text content with the corresponding error message.

title

type: string
default: "" (no title)

The title of the aside to display. If title is not set, no title is displayed.

icon

type: string
default: "" (corresponds to the type)

The custom icon to display instead of the default one set by the type. Can be one of the following:

• Font Awesome icon name
• Lucide icon name

iconType

type: "regular" | "solid" | "light" | "thin" | "sharp-solid" | "duotone" | "brands"
default: "regular"

The Font Awesome icon style — only used with Font Awesome icons.