Skip to main content
To display secondary information alongside a page’s main content, use the <Aside> component.
Include nonessential, supplementary information in a regular <Aside>. If some information is important or might lead to bad cases when not taken into consideration, specify a different type, such as "caution" or "danger".
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:

​
iconType

type: "regular" | "solid" | "light" | "thin" | "sharp-solid" | "duotone" | "brands"
default: "regular" The Font Awesome icon style — only used with Font Awesome icons.