Callouts are the most-used component in Dokly. They draw the reader's eye to information that would otherwise blend into the prose — a warning, a tip, a side note.
Examples#
Pro tip
Use callouts sparingly. If every other paragraph is a callout, none of them are.
Watch out
This action is destructive and cannot be undone.
Note
Custom domains require a Pro plan or higher.
Stop
Don't run this command in production without a backup.
Nice
Your project is now live at acme.dokly.co.
Props#
| Prop | Values | Default | Description |
|---|---|---|---|
type | tip, info, note, warning, caution, danger, error, success | info | Visual style and icon |
title | string | none | Bold title above the body |
children | content | required | Anything — paragraphs, lists, code, even other components |
Source#
<Callout type="tip" title="Pro tip">
Use callouts sparingly. If every other paragraph is a callout, none of them are.
</Callout>When to use which type#
| Type | When |
|---|---|
tip | Optional advice that improves the result |
info / note | Context the reader needs but isn't critical |
warning / caution | Something might go wrong |
danger / error | Something will go wrong if you don't pay attention |
success | Confirmation of a successful state |
note is an alias for info, caution for warning, error for danger. Use whichever reads better in context.
Nesting#
Callouts can contain anything — including other components.
With code inside
Run this to verify:
curl https://api.example.com/healthDon't nest callouts inside callouts. It looks bad and confuses the reader.
Accessibility#
Each callout has an icon, but the icon is decorative — the type is conveyed by the title and surrounding context, not the icon alone. Screen readers announce the title as a heading.