Asides

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

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.

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.

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