# Callout import { Callout } from "zudoku/ui/Callout"; import { ReactComponentDoc } from "zudoku/ui/ReactComponentDoc"; This is a callout component that can be used to draw attention to important information. ## Import ```tsx import { Callout } from "zudoku/ui/Callout"; ``` :::tip{title="Hot tip"} There's a shortcut to use callout components in Markdown files: [Admonitions](../markdown/admonitions). ::: ## Note This draws attention to important information. ```tsx This draws attention to important information. ``` ## Info This adds info to your content. ```tsx This adds info to your content. ``` ## Tip If you choose to be. ```tsx If you choose to be. ``` ## Danger It's dangerous to go alone, take this. ```tsx It's dangerous to go alone, take this. ``` ## Caution This raises a warning to watch out for. ```tsx This raises a warning to watch out for. ``` ## Variations Callouts can be customized by omitting the title or icon: Without a title You can hide the icon while keeping the title Or have neither title nor icon ```tsx Without a title You can hide the icon while keeping the title Or have neither title nor icon ```