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.
Settings#
| Setting | Values | Default | Description |
|---|---|---|---|
| Type | Info, Tip, Warning, Error, Success | Info | Visual style and icon |
| Title | text | none | Bold title above the body |
| Body | content | required | Anything — paragraphs, lists, code |
Insert#
Use the slash menu and pick the variant you want: /info, /tip, /warning, /error, or /success. The block inserts with a placeholder title and body — click in to edit, or change the type from the inline controls afterwards.
When to use which type#
| Type | When |
|---|---|
| Tip | Optional advice that improves the result |
| Info | Context the reader needs but isn't critical |
| Warning | Something might go wrong |
| Error | Something will go wrong if you don't pay attention |
| Success | Confirmation of a successful state |
Nesting#
Callouts can contain anything — including code blocks and lists.
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.