Skip to main content
Callouts let you include additional content — notes, warnings, tips, examples — without breaking the flow of your writing.

​
Basic callout syntax

To create a callout, add [!type] to the first line of a blockquote, where type is one of the supported callout types: 
> [!info] Here's a callout title
> Here's a callout block.
> It supports **Markdown**, Wikilinks, and embeds!
The text after the type identifier becomes the callout title. If you omit the title, the type name is used in title case.

​
Title-only callouts

Omit the body to create a callout that shows only a title: 
> [!tip] Title-only callout

​
Inserting callouts

You can insert a callout using the Insert callout command from the Command Palette. The cursor is placed in the title field so you can immediately type a new name. To wrap existing content in a callout, select the text and run the Insert callout command — the selected content is automatically enclosed. In Live Preview, right-click the callout title bar to change the callout type.

​
Foldable callouts

Make a callout foldable by adding + or - directly after the type identifier:
  • + expands the callout by default
  • - collapses it by default
> [!faq]- Are callouts foldable?
> Yes! In a foldable callout, the contents are hidden when the callout is collapsed.

​
Nested callouts

Callouts can be nested by adding extra > levels: 
> [!question] Can callouts be nested?
> > [!todo] Yes!, they can.
> > > [!example] You can even use multiple layers of nesting.

​
Supported types

Each callout type has a distinct color and icon. The type identifier is case-insensitive, and any unsupported type falls back to note. 
> [!note]
> Lorem ipsum dolor sit amet

> [!abstract]
> Lorem ipsum dolor sit amet
Aliases: summary, tldr
> [!info]
> Lorem ipsum dolor sit amet

> [!todo]
> Lorem ipsum dolor sit amet

> [!tip]
> Lorem ipsum dolor sit amet
Aliases: hint, important
> [!success]
> Lorem ipsum dolor sit amet
Aliases: check, done
> [!question]
> Lorem ipsum dolor sit amet
Aliases: help, faq
> [!warning]
> Lorem ipsum dolor sit amet
Aliases: caution, attention
> [!failure]
> Lorem ipsum dolor sit amet
Aliases: fail, missing
> [!danger]
> Lorem ipsum dolor sit amet
Alias: error
> [!bug]
> Lorem ipsum dolor sit amet

> [!example]
> Lorem ipsum dolor sit amet

> [!quote]
> Lorem ipsum dolor sit amet
Alias: cite

​
Custom callouts

You can define custom callout types using CSS snippets or community plugins. To define a custom callout in CSS: 
.callout[data-callout="custom-question-type"] {
    --callout-color: 0, 0, 0;
    --callout-icon: lucide-alert-circle;
}
  • The data-callout value is the type identifier you use in your notes, e.g. [!custom-question-type].
  • --callout-color sets the background color as RGB values (0–255).
  • --callout-icon accepts an icon ID from lucide.dev or an inline SVG element:
--callout-icon: '<svg>...custom svg...</svg>';
Obsidian updates Lucide icons periodically. Only use icons from the version included in your Obsidian installation or earlier to ensure compatibility.

Build docs developers (and LLMs) love

Get started for freeTalk to us