---
title: "Callouts"
description: "Attention-drawing callout blocks using the data-callout attribute."
type: docs
weight: 35
date: 2026-04-11
tags: ["components", "callouts", "data-attributes"]
ai-disclosure: "generated"
ai-model: "claude-sonnet-4-6"
ai-provider: "Anthropic"
---

Add `data-callout="<type>"` to any block element to style it as a callout. Four types are available: `note`, `tip`, `warning`, and `error`. No extra classes needed.

## Inline Demo

<div data-demo>
  <div data-callout="note"><strong>Note</strong> — General information worth highlighting.</div>
  <div data-callout="tip"><strong>Tip</strong> — A helpful suggestion or best practice.</div>
  <div data-callout="warning"><strong>Warning</strong> — Something to watch out for.</div>
  <div data-callout="error"><strong>Error</strong> — A critical issue or destructive action.</div>
</div>