'%20stroke='%23E0E0E0'%20stroke-width='2'/%3e%3cdefs%3e%3clinearGradient%20id='paint0_linear_2682_149131'%20x1='7'%20y1='4'%20x2='23.0784'%20y2='26.6541'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%233A3AEA'/%3e%3cstop%20offset='0.592633'%20stop-color='%23DF13F9'/%3e%3cstop%20offset='0.763157'%20stop-color='%23F0558E'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e)
Button
Actions across five emphasis styles, five sizes, two shapes, and an optional toggle.
Design system
Components
Accessible behavior from your preferred headless library, resolved appearance from Etesie. Each component has a stable URL, live preview, anatomy map, utility classes and tokens.
26 recipes
Browse components
Start with the visual result; open anatomy and implementation details only when needed.
Buttons
Icon button
Icon-only actions across four emphasis styles, five sizes, three widths, and two shapes.
Button group
Invisible container that spaces adjacent buttons and, in the standard variant, lets the active one grow into its neighbours.
Split button
A leading action with a trailing menu toggle, separated by a 2dp seam and asymmetric inner corners.
Floating action button
The primary action of a screen. Sizes small through large, optionally extended with a label.
FAB menu
A FAB that opens into related actions. Anchored to the page, so it is rendered inline rather than portalled.
Selection
Checkbox
Binary or mixed-state selection control.
Chip
Compact label, filter, status, or dismissible value.
Select
Non-editable selection control and popup options.
Combobox
Editable selection field with filterable popup options.
Listbox
Always-visible option list where the choices stay on screen and one of them is the current value. Reach for the select when the choice should collapse into a trigger, the connected button group when the options are actions rather than a value, and tabs when the choice switches views.
Slider
Single- or multi-thumb numeric range input.
Connected button group
Material connected button group: adjacent buttons sharing one shape, single- or multi-select. Replaces the segmented button, which Material deprecated in the expressive update.
Segmented control
Etesie extension: a single-select switcher with a sliding indicator. Material has no such component — its segmented button is deprecated. Reach for the connected button group when the choice is an action, and tabs when it switches views; use this only where the sliding indicator itself carries meaning.
Text input
Text field
Single-line inputs and textareas with label and supporting text.
Containment
Card
Grouped content surface with optional header and footer.
Dialog
Modal surface with backdrop, title, description, and actions.
Accordion
Disclosure items with independently styleable triggers, indicators, and content.
Table
Tabular data. Material has no data-table spec, so this is an Etesie extension built from Material foundations.
Navigation
Navigation rail
Top-level destinations kept in view beside the content, each an icon above its own label.
Tabs
A tab list, its selection indicator, triggers, and panels.
Communication
Badge
Small count or status marker attached to another element.
Tooltip
Short contextual label attached to a trigger.
Loading indicator
An indicator recipe that composes MaterialShape geometry with Motion tokens.
Other
Code
A readable code surface with optional language context, copy action, and overflow controls.
Code editor
A themed container for a Monaco editor; Monaco owns the editable content and syntax rendering inside it.