# AccentText

> A single emphasized phrase inside a landing headline — brand color, a swash, a marker band, a fading sheen, or a word set in a pill or a tinted chip — so the surrounding display heading stays one weight and size.

```ts
import { AccentText } from "@sdxc/ui/landing";
```

Stresses one phrase of a display heading while the heading keeps one weight; the
swash, marker and chip dot are decorative, and the sheen falls back to solid ink
under forced colors.

## Examples

```tsx
<Heading size="display">Ship <AccentText>{t("hero.accent")}</AccentText> faster</Heading>
```

```tsx
<Heading size="display">Know <AccentText variant="swash">{t("hero.accent")}</AccentText></Heading>
```

```tsx
<Heading size="display">The <AccentText variant="pill">{t("hero.tag")}</AccentText> gateway</Heading>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `variant?` | `"color" \| "swash" \| "highlight" \| "sheen" \| "pill" \| "chip"` | Treatment for the phrase. `swash` keeps the phrase on one line so the stroke spans it. Defaults to DEFAULT_VARIANT. |
| `children` | `RemixNode` | The emphasized phrase. |

Also accepts everything in `TagProps<"span">`.


## Types

| Name | Values | What it decides |
| --- | --- | --- |
| `Variant` | `"color" \| "swash" \| "highlight" \| "sheen" \| "pill" \| "chip"` | How the phrase is stressed: brand color, brand color over a hand-drawn swash, a marker band behind the glyphs, a `sheen` fading the ink toward the end, an outlined uppercase `pill` at half size, or a tinted `chip` led by a dot. |