Asides

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

Preview

Catatan

Include nonessential, supplementary information in an <Aside>.

Import

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

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.

MDX

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>

Markdoc

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

Preview

Catatan

Some content in an aside.

Perhatian

Some cautionary content.

Tips

Other content is also supported in asides.

// A code snippet, for example.

Bahaya

Do not give your password to anyone.

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.

Use custom titles

Override the default aside titles by using the title attribute.

MDX

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

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

Markdoc

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

Preview

Watch out!

A warning aside with a custom title.

Use custom icons

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

MDX

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

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

Markdoc

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

Preview

Tips

A tip aside with a custom icon.

<Aside> Props

Implementation: Aside.astro

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.

title

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.

icon

type: StarlightIcon

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