Callouts

Use callouts to highlight information, warnings, tips, and other content without breaking the flow of your notes.

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

> [!note]
> Lorem ipsum dolor sit amet

abstract / summary / tldr

> [!abstract]
> Lorem ipsum dolor sit amet

Aliases: summary, tldr

info

> [!info]
> Lorem ipsum dolor sit amet

todo

> [!todo]
> Lorem ipsum dolor sit amet

tip / hint / important

> [!tip]
> Lorem ipsum dolor sit amet

Aliases: hint, important

success / check / done

> [!success]
> Lorem ipsum dolor sit amet

Aliases: check, done

question / help / faq

> [!question]
> Lorem ipsum dolor sit amet

Aliases: help, faq

warning / caution / attention

> [!warning]
> Lorem ipsum dolor sit amet

Aliases: caution, attention

failure / fail / missing

> [!failure]
> Lorem ipsum dolor sit amet

Aliases: fail, missing

danger / error

> [!danger]
> Lorem ipsum dolor sit amet

Alias: error

bug

> [!bug]
> Lorem ipsum dolor sit amet

example

> [!example]
> Lorem ipsum dolor sit amet

quote / cite

> [!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.