# Aside component (https://docs-fpm2731fy-ton-core-docs.vercel.app/llms/contribute/snippets/aside/content.md)



<Callout type="info">
  Deprecated in favor of `<Callout>` component.
</Callout>

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

<Callout>
  Include nonessential, supplementary information in a regular `<Callout>`. If some information is important or might lead to bad cases when not taken into consideration, specify a different [`type`](#type), such as `"caution"` or `"danger"`.
</Callout>

It is a wrapper over built-in [Callout components](https://www.mintlify.com/docs/components/callouts) provided by Mintlify, but with a unified interface and a way to specify a title.

## Import [#import]

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

## Usage [#usage]

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

An `<Aside>` can have an optional [`type`](#type) attribute, which controls the aside’s color, icon, and default title.

````mdx
<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 [#use-custom-titles]

Override the default aside titles by using the [`title`](#title) attribute.

```mdx title="Watch out!"

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

## `<Aside>` props [#aside-props]

**Implementation:** [`aside.jsx`](https://github.com/ton-org/docs/blob/35698de907d234c950c47d74f9120bcaa120828a/snippets/aside.jsx)

The `<Aside>` component accepts the following props:

### `type` [#type]

**type:** `"note" | "tip" | "caution" | "danger"` <br />
&#x2A;*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` [#title]

**type:** `string` <br />
&#x2A;*default:** `""` (no title)

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

### `icon` [#icon]

**type:** `string` <br />
&#x2A;*default:** `""` (corresponds to the [`type`](#type))

The custom icon to display instead of the default one set by the [`type`](#type). Can be one of the following:

* [Font Awesome icon] name
* [Lucide icon](https://lucide.dev/icons) name

### `iconType` [#icontype]

**type:** `"regular" | "solid" | "light" | "thin" | "sharp-solid" | "duotone" | "brands"` <br />
&#x2A;*default:** `"regular"`

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

[Font Awesome icon]: https://fontawesome.com/icons