Asides

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

import { Aside } from '@astrojs/starlight/components';

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 '@astrojs/starlight/components';

<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>

{% 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 %}

Starlight also provides a custom syntax for rendering asides in Markdown and MDX as an alternative to the <Aside> component. See the “Authoring Content in Markdown” guide for details of the custom syntax.

Override the default aside titles by using the title attribute.

import { Aside } from '@astrojs/starlight/components';

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

{% aside type="caution" title="Watch out!" %}
A warning aside *with* a custom title.
{% /aside %}

Override the default aside icons by using the icon attribute set to the name of one of Starlight’s built-in icons.

import { Aside } from '@astrojs/starlight/components';

<Aside type="tip" icon="starlight">
	A tip aside *with* a custom icon.
</Aside>

{% aside type="tip" icon="starlight" %}
A tip aside *with* a custom icon.
{% /aside %}

Implementation: Aside.astro

The <Aside> component accepts the following props:

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.

type: string

The title of the aside to display. If title is not set, the default title for the current aside type will be used.

type: StarlightIcon

An aside can include an icon attribute set to the name of one of Starlight’s built-in icons.