Component gallery
Small building blocks with explicit inputs and consistent behavior.
On this page
Buttons and links
Navigation uses a real link. Actions use a real button. Every control has a label, including icon-only controls.
Read the quick start Explore composition
An unavailable action uses a disabled button:
Badges
Shared primitive Opt-in
Badges provide short supporting labels. They do not add an interactive role.
Callouts
Disclosure
What makes this component accessible?
A native details element provides disclosure behavior. Focus its summary with the keyboard, then press Enter or Space to toggle it. This also works with JavaScript disabled.
An initially expanded disclosure
Use an explicit input when content should start expanded.
Typography
Readable by default
Body text, lists, tables, links, and code share semantic colors in light and dark mode. The theme switcher follows your system preference until you choose a mode.
| Building block | Responsibility |
|---|---|
| Token | A shared visual decision |
| Primitive | A small semantic element |
| Composition | Several primitives working together |
| Layout | The structure of a page |
<article>
<h1>Content comes first</h1>
<p>Hugo renders the page. Alpine enhances interaction.</p>
</article>