Redact
Obscure a piece of content until it is revealed: blur it, block it, or mask it, and bring it back on hover, on a click, while held, or with a page-wide switch.
Live demo
Redact wraps a piece of content you don't want on screen by default — an account number, an API key, a plot spoiler — and hides it in one of three ways: blur softens it, block lays a solid bar over it, and mask covers it with a dotted fill. What brings it back is a separate choice: hover reveals while the pointer is over it or it holds focus, click toggles it, hold shows it only while a key or the pointer is held down, and never leaves the reveal entirely to the page-level switch.
That switch — revealAllRedactions() — is the toolbar toggle that shows or re-hides every redaction on the page at once, so a form full of masked fields flips open together. While a redaction is concealed its content can't be selected, so an obscured value can't be dragged out with a mouse, and it is hidden from assistive tech until revealed. The cover and its reveal hint render through a fragment, so a mod can reshape the affordance; the reveal behavior lives in the element, because which trigger brings the content back is logic a token can't carry.
When to use
How this component composes with the rest of the set.
label. The cover is a real button, and a button that reads only "Reveal" tells a screen-reader user nothing about what they are about to uncover. reveal="hover" is the friendliest and the leakiest — the content shows on a passing mouse. For anything genuinely sensitive reach for click or hold, which take intent. reveal="never" with the page-level revealAllRedactions() switch when a screenful of fields should flip open together and nothing should reveal one at a time. blur still hints at length and shape; block and mask give nothing away. Reach past blur when the shape itself is the secret. Props
6 props, straight from the manifest.
| Prop | Type | Default | Bindings | Description |
|---|---|---|---|---|
Appearance
States
revealed
The content is showing and the cover has faded out. Reached by the trigger, the revealed prop, or the page-level switch.
Anatomy
The named parts that make up the component, with their selectors.
redact
The inline wrapper. It flows with the surrounding text and gives the cover a box to fill.
content
The protected content. Blurred under blur, unselectable while concealed, and hidden from assistive tech until revealed.
cover
The layer over the content and the reveal surface. Transparent under blur, a solid fill under block, a dotted mask under mask; it fades out when revealed.
cue
The reveal hint on the cover — an eye by default, or the text you give it. Shown for block and mask, and whenever a cue is named.
Tokens & coverage
What the component consumes, checked live against what the algorithm produces.
Live coverage check against the xtyle-default register
(derive(xtyleDefault, { anchors }) →
coverComponent(manifest, register)). Every token this component
consumes must be a key the algorithm produces.
--bg-2
--border-thin
--duration-base
--ease-standard
--elevation-1
--fg-1
--fg-3
--leading-tight
--radius-full
--radius-sm
--ring
--space-1
--space-2
--surface-overlay
--surface-overlay-border
--text-xs
Slots
The content to protect. Any inline markup — text, a link, a code span.
Accessibility
<button>, focusable and operable from the keyboard: Enter or Space reveals it for click, and holds it open for hold. label names that button (Reveal recovery code), and the name flips to Hide … once the content is showing. aria-hidden, so a screen reader doesn't read out the very thing the redaction is covering; revealing it — by any trigger — returns it to the accessibility tree. reveal="never" leaves the cover inert and out of the tab order, since there is nothing for a per-item interaction to do; it reveals only through the page-level switch. prefers-reduced-motion. Code
An inline secret you hover to read
The friendliest shape: blur a value in a sentence and let a hover or a focus bring it back.
<p>
Your recovery code is
<xtyle-redact mode="blur" reveal="hover" label="recovery code">4XQ2-9F1K-77PL</xtyle-redact>.
Keep it somewhere safe.
</p><script lang="ts">
import { Redact } from "@xtyle/svelte";
let shown = $state(false);
</script>
<p>
SSN <Redact mode="mask" reveal="click" label="social security number" bind:revealed={shown}>
123-45-6789
</Redact>
</p>
<p>{shown ? "revealed" : "hidden"}</p>---
import { Redact } from "@xtyle/astro";
---
<p>
API key
<Redact mode="block" reveal="hold" label="API key">key-9f2a7c1e4b6d</Redact>
(press and hold to read).
</p>