component-sampler
Themed grid of native UI elements. Shows how buttons, inputs, badges, and other components look with the active VB theme.
Overview
Renders a grid of real native HTML elements styled by VB's cascade. Theme changes propagate automatically via CSS custom properties — no re-render needed. Useful for brand guideline pages that need to show how the active theme affects standard UI components.
Part of the Design System Pack.
Usage
Default (all components)
Shows buttons, inputs, selects, checkboxes, radios, badges, and progress bars.
Full sampler
<component-sampler></component-sampler>Selective
Show only specific component types.
Selective
<component-sampler components="button,badge,progress" label="Key UI Elements"></component-sampler>Compact
Reduced spacing for tighter layouts.
Compact
<component-sampler compact components="button,input,checkbox" label="Compact View"></component-sampler>Available Component Types
| Type | Renders |
|---|---|
button | Primary, secondary, and disabled buttons |
input | Text, email, and read-only inputs |
select | Select with sample options |
checkbox | Checked, unchecked, and disabled checkboxes |
radio | Selected, unselected, and disabled radios |
badge | Default, success, warning, danger, and info badges |
progress | Progress bars at 33%, 66%, and 100% |
range | Range slider |
textarea | Textarea with placeholder |
Attributes
| Attribute | Values | Default | Description |
|---|---|---|---|
components | string | button,input,select,checkbox,radio,badge,progress | Comma-separated component types to render |
label | string | — | Optional heading label |
compact | boolean | — | Reduced spacing variant |