# Callouts, quotes and toggles

> Callouts, quotes, toggles and dividers.

Each example below is a real Notion block, rendered by notionic's built-in components, followed by a recipe to change it.

# Callout

**In Notion:** type `/callout`. Click the icon to change it, and pick a color from the block's `⋮⋮` menu.

> 💡 A callout with **rich text**.
>
> A second paragraph inside it.

> ⚠️ A yellow callout.

**Renders as:** a bordered box with the icon, in Notion's color. See [Supported blocks](https://notionic.dev/docs/supported-blocks).

```typescript
// Customize · callout.tsx
import { defaultComponents, type BlockProps } from "notionic"

// Wrap the built-in callout instead of replacing it.
const BuiltInCallout = defaultComponents.callout!

export function FramedCallout(props: BlockProps<"callout">) {
  return (
    <div className="rounded-xl ring-1 ring-border">
      <BuiltInCallout {...props} />
    </div>
  )
}

// Or use shadcn/ui's Alert, from the registry: import { NotionCallout } from "@/components/notion-callout"
<NotionRenderer blocks={blocks} components={{ callout: FramedCallout }} />
```

# Quote

**In Notion:** type `"` and a space, or `/quote`.

> A single-line quote.

**Renders as:** a `<blockquote>` with a border on the start side.

```typescript
// Customize · quote.tsx
import { RichText, type BlockProps } from "notionic"

export function Quote({ block, context, children }: BlockProps<"quote">) {
  return (
    <blockquote className="border-s-4 border-primary ps-4 text-lg italic">
      <RichText text={block.quote.rich_text} context={context} />
      {children}
    </blockquote>
  )
}

<NotionRenderer blocks={blocks} components={{ quote: Quote }} />
```

# Toggle

**In Notion:** type `>` and a space, or `/toggle`.

<details>
<summary>A toggle</summary>

Content inside the toggle.

- A list inside it

</details>

**Renders as:** a `<details>`, which opens without JavaScript and keeps its content in the HTML.

```typescript
// Customize · toggle.tsx
import { NotionToggle } from "@/components/notion-toggle"

// shadcn/ui's Collapsible, from the registry.
<NotionRenderer blocks={blocks} components={{ toggle: NotionToggle }} />
```

# Divider

**In Notion:** type `---`.

---

**Renders as:** an `<hr>` in the border color.

```typescript
// Customize · divider.tsx
export function Divider() {
  return <hr className="my-8 border-dashed border-border" />
}

<NotionRenderer blocks={blocks} components={{ divider: Divider }} />
```