| Native authored element | Owning Zenbu primitive |
|---|---|
button, button-like a |
zen-button |
text/email/file/etc. input |
zen-input or zen-field |
textarea |
zen-textarea or zen-field |
native select |
zen-native-select, zen-select, or zen-field |
| checkbox input | zen-checkbox |
| radio inputs/fieldset | zen-radio-group |
| switch checkbox | zen-switch |
| range input | zen-slider |
| date value | zen-calendar or zen-date-picker |
| one-time-code input | zen-input-otp |
| filter input and options | zen-combobox |
| command input and items | zen-command |
| anchor with reusable effect | zen-link |
| heading with canonical type role | zen-heading |
| text with canonical type role | zen-text |
| padded container | zen-box |
Control-owning composites
These behavior primitives already own their native buttons. Do not add a second
zen-button:
- menus, context menus, menubars, and navigation menus;
- tabs, toggles, toggle groups, and sidebars;
- calendars, carousels, commands, and data tables;
- notifications and dismissible alerts.
Coordinating containers
Dialogs, alert dialogs, sheets, drawers, popovers, tooltips, forms, empty
states, and items coordinate or arrange content. They do not own application
actions. Wrap authored action buttons in zen-button, then put the native
button inside it.
Generated controls
Component implementation code may create native buttons for accessibility. Generated controls are owned by that component. Application-authored controls are checked separately.