Atoms
File icons
Fourteen file-format icons — seven formats in badge and wordmark families. Each embeds light and dark artwork and switches on Tailwind's dark variant: pure CSS, no props, no hydration flash.
Usage
import { FileBadgeTei, FileWordmarkPdf } from "@exegia/corpora-ui"
<FileBadgeTei /> // 64×64, follows the app's dark class
<FileBadgeTei size={96} /> // any size
<FileWordmarkPdf title={null} /> // decorative: aria-hidden
<div className="dark">
<FileBadgeTei /> {/* dark artwork, regardless of theme */}
</div>API reference
| Prop | Type | Default | Description |
|---|---|---|---|
| size | number | string | 64 | Rendered width and height. |
| title | string | null | e.g. "TEI file" | Accessible name (role=img + aria-label). Pass null to mark the icon decorative — it becomes aria-hidden with role=presentation. |
| className / …props | SVGProps<SVGSVGElement> | — | Everything else is forwarded to the root <svg>. Theme switching needs no props: the light layer is dark:hidden, the dark layer hidden dark:inline, so the artwork follows whatever drives the app's dark variant — scope a dark class to force one theme. |
Last updated on
Avatar
Identity avatar: an image when one is given, initials otherwise, with a presence badge, a loading skeleton, and story-ring audio states.
Menu command
Command rows for a menu popup: icon · label · description · trailing status. MenuCommand wires a trigger to the popup; MenuCommandList uses the shared Command components for searchable, keyboard-accessible rows.