Components
The fourteen elements of the design system, at a glance.
Every element is a custom element: it works in any framework, it carries its own
styles in a shadow root, and it takes a dark property instead of reading a
global theme. The one exception is tuix-table, which
has none. The previews on these pages are live: they follow the theme selected
in the sidebar, so each element is shown with dark set to match.
Every example comes in Angular, Vue and React / Next.js the selector above the code switches between them. The one-time setup per framework is in React and Next.js, Vue and Angular.
Typography and icons
tuix-text
Fourteen text styles and sixteen semantic colours.
tuix-icon
88 icons, four sizes, any colour.
Actions
tuix-button
Primary and secondary actions, with optional icons.
tuix-icon-button
A square button whose label is one icon.
tuix-link
A styled anchor with a disabled state.
Form controls
tuix-input
Text, search, password and textarea, with a floating label.
tuix-dropdown
A select, optionally filtered by typing.
tuix-checkbox
A checkbox with an error state and either label side.
tuix-radio-button
A whole radio group from one list of options.
tuix-toggle-button
A switch with the checkbox API and a sliding track.
Surfaces and feedback
tuix-paper
The surface primitive: background, elevation, radius.
tuix-table
Data table with slotted cells, cards on mobile, controlled pagination.
tuix-toast
A transient notification that hides itself.
tuix-modal
A centred dialog with title, body and action slots.
What every component shares
dark | Every element but tuix-table takes it; nothing is inherited from an ancestor or a provider |
| Attributes | Lowercase, always: iconright, not iconRight. Objects and arrays must be set as properties |
| Slots | Text goes in the default slot; the elements with several regions name theirs |
| Events | CustomEvents that bubble, with the payload in event.detail, usually event.detail.value |
| State | Never owned by the component. It reports a change; the application writes the new value back |
| Typography | Rubik, through tuix-text, at the sizes in the type scale |
Variants at a glance
| Element | Variants | Sizes | States |
|---|---|---|---|
tuix-text | 16 colours | 14 text styles | None |
tuix-icon | any colour + fill | small medium large full | None |
tuix-button | primary secondary | responsive | disabled, full, icons |
tuix-icon-button | primary secondary | responsive | disabled |
tuix-link | primary secondary | None | disabled |
tuix-paper | elevation 0 to 4 | 4 radii | None |
tuix-input | text search password textarea | None | disabled, readonly, 5 description states |
tuix-dropdown | single search | None | disabled, description states |
tuix-checkbox | label left / right | None | checked, disabled, error |
tuix-radio-button | label left / right | None | disabled, error |
tuix-toggle-button | label left / right | None | checked, disabled |
tuix-table | table / card layout | None | loading, paginated |
tuix-toast | text warning error success | None | none (hidden) |
tuix-modal | None | None | visible, scrollable |