# Callout

<Callout type="info" title="Two ways to write this">
  Either `<Callout type="info">` or the shorthand `<Info>` below renders identically - both accept the same `title` prop.
</Callout>

<Tip>
  This is `<Tip>` - the shorthand form of `<Callout type="tip">`, with no `title` set.
</Tip>

```mdx
<Callout type="info" title="Two ways to write this">
  Either form renders identically.
</Callout>

<Tip>
  The shorthand form, with no title.
</Tip>
```

Every type has a same-named shorthand component - `<Note>`, `<Info>`, `<Tip>`, `<Warning>`, `<Danger>`, `<Check>` - so `<Info title="...">...</Info>` and `<Callout type="info" title="...">...</Callout>` are two ways to write the exact same thing. Both forms are injected automatically, same as every other built-in.

**`Callout` props**

<Parameter name="type" type='"note" | "info" | "tip" | "warning" | "danger" | "check"' default='"note"'>
  Only on `Callout` — each shorthand hardcodes its own type.
</Parameter>

<Parameter name="title" type="string">
  An untitled callout renders its icon inline with a single line of body text instead of a bold heading line above it.
</Parameter>

<Parameter name="icon" type="string">
  Only on `Callout` — replaces the type's own icon. Any icon string, see [Icons](/docs/content/components/icon/#icons).
</Parameter>

<Parameter name="color" type="string">
  Only on `Callout` — any CSS color. Replaces the type's accent, which the border, background tint, icon, and title are all derived from.
</Parameter>

<Callout icon="key" color="#FFC107">
  A custom callout: `<Callout icon="key" color="#FFC107">`.
</Callout>