'/%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}
Overlays
Toggletip and InfoLabel
A small info button that opens a popover on press, with a title, text and links; three icons and two sizes. InfoLabel puts one next to a field label.
import { Toggletip, InfoLabel } from '@alea/ui';
Examples
Toggletip and InfoLabel
A small info button that opens a popover on press, with a title and links. InfoLabel puts one next to a field label.
Usage this month
Legacy export
Tokens
The design tokens this component reads, with their value in the current theme. Override any of them to restyle it.
Color
--alea-status-warning…--alea-surface-hover…--alea-text…--alea-text-muted…
Type
--alea-font-size-sm…
Props
Toggletip props
A small info button that opens a popover on press: for explanations people may want to read, with links if needed. Escape or a press outside closes it.
| Prop | Type | Default | Description |
|---|---|---|---|
childrenrequired | ReactNode | - | What the popover says. Can hold links and buttons (unlike a Tooltip). |
aria-label | string | - | The button's name for screen readers. Default "More information". |
icon | "warning" | "info" | "help" | 'info' | The icon: info (default), help, or warning. |
placement | "start" | "end" | "bottom" | "top" | 'top' | Where it opens. Default top. |
size | "sm" | "md" | 'sm' | sm (16 px icon, default) or md (20 px). |
title | ReactNode | - | A title at the top of the popover. |
InfoLabel props
A label with an info button beside it, for fields that need a longer explanation than help text.
| Prop | Type | Default | Description |
|---|---|---|---|
childrenrequired | ReactNode | - | The label text. |
inforequired | ReactNode | - | What the info button explains. |
aria-label | string | - | The button's name for screen readers. Default "More information". |
className | string | - | Extra class names. |
htmlFor | string | - | The id of the field this labels, to use it as a field label. |
icon | "warning" | "info" | "help" | - | The icon: info (default), help, or warning. |
isRequired | boolean | - | Marks the field as required. |
placement | "start" | "end" | "bottom" | "top" | - | Where it opens. Default top. |
size | "sm" | "md" | - | sm (16 px icon, default) or md (20 px). |
title | ReactNode | - | A title at the top of the popover. |
Specs
Generated from the source: the variants in the types, the states and tokens in the CSS, and the motion patterns that apply. The grids render the real component in both themes; the numbers are measured from the page.
Toggletip
- Variants
iconwarninginfohelpplacementstartendbottomtopsizesmmd- States
- HoverPressed
- Dark and light
- Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
- Styling hooks
.alea-toggletip-btn.alea-toggletip- Data attributes
data-size=mddata-icon=warning
InfoLabel
- Variants
iconwarninginfohelpplacementstartendbottomtopsizesmmd- Dark and light
- Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
- Styling hooks
.alea-info-label.alea-label-required
Accessibility
- A real button named "More information" (or your label) that opens a dialog popover; Escape closes and focus returns to the button.
- Unlike a tooltip, it opens on press and can hold links, so it works on touch screens and with screen readers.
Keyboard
| Key | Does |
|---|---|
| Enter or Space | Opens it |
| Escape | Closes it |
| Tab | Moves into its links |
Do and don't
Do
- Use it for explanations people may want, not for anything they need to finish the task.
Don't
- Don't hide errors or required steps in a toggletip.