Callouts

Callouts highlight important information, warnings, tips, and other notices.

Basic Callouts

Stardust provides six callout types:

Info

This is an informational callout for general information.

markdown

<Info>
This is an informational callout for general information.
</Info>

Tip

💡 Tip

This is a tip callout for helpful suggestions.

markdown

<Tip>
This is a tip callout for helpful suggestions.
</Tip>

Note

📝 Note

This is a note callout for side notes and additional context.

markdown

<Note>
This is a note callout for side notes and additional context.
</Note>

Warning

⚠️ Warning

This is a warning callout for important cautions.

markdown

<Warning>
This is a warning callout for important cautions.
</Warning>

Danger

🚨 Danger

This is a danger callout for critical warnings and errors.

markdown

<Danger>
This is a danger callout for critical warnings and errors.
</Danger>

Success

✅ Success

This is a success callout for positive confirmations.

markdown

<Success>
This is a success callout for positive confirmations.
</Success>

Custom Titles

Override the default title with the title attribute:

Did you know?

You can customize the title of any callout using the title attribute.

markdown

<Info title="Did you know?">
You can customize the title of any callout using the `title` attribute.
</Info>

⚠️ Breaking Change

The API signature has changed in version 2.0.

markdown

<Warning title="Breaking Change">
The API signature has changed in version 2.0.
</Warning>

Markdown Inside Callouts

Callouts support full Markdown syntax:

Formatting Support

You can use bold, italic, code, and even:

Lists
With multiple items

And links too!

markdown

<Info title="Formatting Support">
You can use **bold**, *italic*, `code`, and even:

- Lists
- With multiple items

And [links](https://example.com) too!
</Info>

Code Blocks in Callouts

💡 Pro Tip

You can include code blocks inside callouts:

dart

final result = await api.fetch();
print(result);

markdown

<Tip title="Pro Tip">
You can include code blocks inside callouts:

\`\`\`dart
final result = await api.fetch();
print(result);
\`\`\`
</Tip>

When to Use Each Type

Type	Use For
`<Info>`	General information, facts, explanations
`<Tip>`	Helpful suggestions, best practices, shortcuts
`<Note>`	Side notes, additional context, clarifications
`<Warning>`	Important cautions, potential issues, deprecations
`<Danger>`	Critical warnings, destructive actions, security concerns
`<Success>`	Confirmations, completed steps, positive outcomes

Best Practices

Keep callouts concise

Callouts work best when they're brief and scannable. If you have a lot of content, consider using regular prose or breaking it into multiple callouts.

Don't overuse callouts

If everything is highlighted, nothing stands out. Reserve callouts for genuinely important information.

Choose the right type

Use <Danger> sparingly — only for truly critical information. Overusing it diminishes its impact.