# SectionTag

Compact structural text with an optional diamond marker.

- Family: Foundation, imported from `mizu-ui` or `mizu-ui/ui`
- Docs: https://mizu.user64bit.world/components/section-tag
- Source: https://github.com/0xuser64bit/mizu/blob/main/packages/mizu/src/ui/SectionTag.tsx

## Usage

```tsx
import { SectionTag } from "mizu-ui";

export function Example() {
  return <SectionTag tone="accent">Interface craft</SectionTag>;
}
```

## Copy it with the shadcn CLI

```sh
npx shadcn@latest init 0xuser64bit/mizu/preset # once, where there is no components.json
npx shadcn@latest add 0xuser64bit/mizu/section-tag
```

## Props

- `tone`: `"muted" | "faint" | "paper" | "accent"` (default `"muted"`). Label color.
- `diamond`: `boolean` (default `true`). Show the marker.
- `as`: `"p" | "h2" | "h3" | "h4"` (default `"p"`). The element. Use a heading level when the tag is the section's only title.

## Accessibility

A paragraph by default. When a section has no other heading, pass a heading level to `as` so the tag titles it in the outline.

## Motion

Static text.