Components - Project Tessera

Tessera’s screens are being rebuilt from shared React components (D-011). There are 4 components with 26 stories so far. Each image is captured automatically from the live Storybook, where you can change props and switch the AI style.

Components use design tokens only, and every story is checked by the automated accessibility audit (WCAG 2.2 AA).

AiContent

Render the required .ai markup contract with named source, body, citations, and actions. Open AiContent in Storybook

Tutor hint (chat)

AiContent: Tutor hint (chat)

Co-author reply (chat)

AiContent: Co-author reply (chat)

Summary (note)

AiContent: Summary (note)

Drafted block (not yet reviewed)

AiContent: Drafted block (not yet reviewed)

Kept block (reviewed)

AiContent: Kept block (reviewed)

Button

Trigger primary, secondary, text, or icon actions. Open Button in Storybook

Primary

Button: Primary

Secondary

Button: Secondary

Text

Disabled

Button: Disabled

With Icon

Icon Only

As Link

Button: As Link

Learner Density

Button: Learner Density

Compact Density

Card

Provide a reusable surface for grouped content. Open Card in Storybook

Default

Card: Default

Quiet

Card: Quiet

Interactive

Card: Interactive

Learner Density

Card: Learner Density

Compact Density

Card: Compact Density

StatusChip

Label urgency, mode, stage, or status in a compact line. Open StatusChip in Storybook

Neutral

Accent

Ai

Success

Warning

Error

With Icon