'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Layout
Spoiler
Long content cut to a height with a fade and Show more.
Ant Design: Typography ellipsis expandable
import { Spoiler } from '@alea/ui';
Examples
Show more
Cut to 80 px with a fade.
Alea is a design system with its own look, built on React Aria so keyboard, focus and screen reader behavior come right from the start. Every component has a matching Figma component made from the same tokens, in dark and light. The docs show live examples from real files, the props come from the TypeScript types, and every page is checked with axe in both themes. Charts read their points aloud, tables can be edited inline, and the editor never renders raw HTML.
Props
Spoiler props
Long content cut to a height with a fade and a Show more button (Mantine Spoiler, Ant Typography ellipsis expandable).
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Extra class names for the root element. |
hideLabel | string | 'Show less' | Text of the button that collapses. Default "Show less". |
maxHeight | number | 120 | Height shown before "Show more", px. Default 120. |
showLabel | string | 'Show more' | Text of the button that expands. Default "Show more". |
Accessibility
- The button has aria-expanded and controls the content.
Keyboard
| Key | Does |
|---|---|
| Enter or Space | Shows more or less |
Do and don't
Do
- Show enough text before the cut to tell people what's inside.
- Keep the button text specific when it helps (Show all 12 features).
Don't
- Don't hide required information.
- Don't cut in the middle of a table or list item.