Asides

Learn how to use asides to display important information, tips, warnings, and notes in your documentation with different types and styling options.

Introduction

Asides are callout components that help highlight important information, tips, warnings, and notes in your documentation. They provide visual emphasis and help readers quickly identify different types of content. The Six Starlight Theme supports both markdown-based asides and component-based asides with consistent styling.

Props

Prop Name	Prop Type	Description
`type`	`'note' \| 'tip' \| 'caution' \| 'danger'`	The type of aside to display. Determines the visual styling and icon.
`children`	`ReactNode`	The content to display inside the aside.

Markdown Asides

Markdown asides use the :::type syntax and are perfect for simple content that doesn’t require complex formatting.

Note Aside

:::note
This is a note aside that provides general information or context to the reader.
:::

Tip Aside

:::tip
This is a tip aside that offers helpful advice or best practices.
:::

Caution Aside

:::caution
This is a caution aside that warns about potential issues or important considerations.
:::

Danger Aside

:::danger
This is a danger aside that highlights critical warnings or potential problems.
:::

Component Asides

For more complex content or when you need programmatic control, you can use the Aside component from Starlight.

Basic Aside

<Aside>
  This is a basic aside component that displays information without any specific type styling.
</Aside>

Note Type

<Aside type="note">
  This aside uses the note type for general information.
</Aside>

Tip Type

<Aside type="tip">
  This aside uses the tip type for helpful advice.
</Aside>

Caution Type

<Aside type="caution">
  This aside uses the caution type for warnings.
</Aside>

Danger Type

<Aside type="danger">
  This aside uses the danger type for critical information.
</Aside>

Advanced Usage

Asides with Rich Content

Asides can contain various types of content including code blocks, tables, and other markdown elements.

:::note
**Code Example:**
```js
const example = 'This is a code block inside an aside'
console.log(example)

Table Example:

Feature	Status	Description
Markdown	✅	Full markdown support
Code blocks	✅	Syntax highlighting
Tables	✅	Responsive design

Interactive Elements:

Click to expand

This is a collapsible section within an aside that can contain additional information.

:::

:::note

**Code Example:**
```js
const example = 'This is a code block inside an aside'
console.log(example)