Caption

Implemented

Small muted caption text (ep-xs, text-muted) for figure captions, helper lines and secondary annotations. Polymorphic via `as`.

Categoryatoms

Sourcesrc/components/atoms/Caption/Caption.tsx

AI HintUse for figure captions and helper text. Prefer semantic `as='figcaption'` inside <figure>.

Small muted caption text for figure captions, helper lines and secondary annotations. Polymorphic via the as prop.

Caption

design-system

Renders ep-xs muted text (text-ep-text-muted, font-text-primary). Defaults to a <span>; pass as="figcaption" inside <figure>, or as="p" for standalone helper lines. Forwards and merges className and all HTML attributes.

Photo: Alexan Studio — figure 1

Props

Preview

Caption

Prop

Type

Required

Default

Description

as

'span' | 'figcaption' | 'p' | 'div'

Optional

'span'

Element to render (figcaption for figure captions)

children

React.ReactNode

Required

—

Caption content

Quick use:<Caption />

Usage

Import

tsxSnippet

import { Caption } from "@epasslive/design-system"

Example 1

tsxSnippet

<Caption>Photo: Alexan Studio</Caption>

Example 2

tsxSnippet

<Caption as='figcaption'>…</Caption>

Anti-patterns

— Do not use for primary body text — use Body/paragraph typography