Obsidian callout types

The help page lists 13 types and 14 aliases, 27 identifiers in total. It gives no count. The numbers on this page are a count of its list on the check date.

To use a type, write its identifier in the marker, for example [!tip] or [!warning]. The help page says that each type comes with a different background color and icon.

The table keeps the sequence of the help page. Five types have no alias.

To create a callout, add [!info] to the first line of a blockquote, where info is the type identifier. For example, the line > [!note] opens a callout of the note type.

By default, the title of the callout is its type identifier in title case. To change the title, add text after the type identifier, as in > [!tip] Callouts can have custom titles.

You can omit the body to create a title-only callout, as in > [!tip] Title-only callout.

The Insert callout command inserts a default [!note] callout. To wrap existing content in a callout, select the text and run the same command. In Live Preview, you can right-click the callout name to change the callout type.

To make a callout foldable, add a plus (+) or a minus (-) directly after the type identifier. A plus sign expands the callout by default, and a minus sign collapses it.

The example on the help page starts with the line > [!faq]- Are callouts foldable?. In that example the minus sign comes after the closing bracket of the marker. With a plus sign in the same position, the line is > [!faq]+ Are callouts foldable?.

You can nest callouts in multiple levels. The example on the help page has three levels. Its three lines start with > [!question], > > [!todo] and > > > [!example]. The first line has one > before the marker, the second line has two and the third line has three.

The help page states no maximum number of levels.

Unless you customize callouts, any unsupported type defaults to the note type.

The type identifier is case-insensitive.

CSS snippets and community plugins can define custom callouts, or overwrite the default configuration.

To define a custom callout, the help page gives a CSS block with the selector .callout[data-callout="custom-question-type"] and two declarations, --callout-color: #000000; and --callout-icon: lucide-alert-circle;. The value of the data-callout attribute is the type identifier that you want to use, for example [!custom-question-type].

--callout-color defines the background color. Any valid CSS color works, for example a hex code (#000000) or an rgb() value.

--callout-icon can be an icon ID from lucide.dev, or an SVG element.

The help page also shows two border declarations as examples, --callout-border-width: 2px; and --callout-border-opacity: 0.25;.

The first table of the developer documentation lists 13 CSS variables for callouts. The descriptions below are the text of that table.

The second table of the developer documentation has the heading Type colors and lists 14 variables. Each row names one variable and its callout types. The table below keeps the sequence and the names of that table.

The two official pages do not agree on important. The help page lists important as an alias of tip. The developer documentation gives important its own variable, --callout-important, and names only tip and hint for --callout-tip. Both statements were on the official pages on the check date.

Four types of the help page have no variable with their own name. The developer documentation names note for --callout-default, abstract for --callout-summary, failure for --callout-fail and danger for --callout-error. It lists no variable with the name --callout-note, --callout-abstract, --callout-failure or --callout-danger.

The developer documentation also names default as a callout type for --callout-default. The help page does not list default.