Components / Base / Button
B1 · Base
Button
Primary, ghost, and small actions from the shared stylesheet.
<button type="button" class="btn">Primary</button>
<button type="button" class="btn ghost">Ghost</button>
<button type="button" class="btn sm">Small</button>
The single-file button copies a document with the stylesheet and script inlined.
When to use
- The control does something on the page.
- A link that looks like an action would be misleading.
When not to use
- The control navigates. Use a link.
- The choice is one of several filters. Use a chip or tabs.
Usage
<button type="button" class="btn">Primary</button>
<button type="button" class="btn ghost">Ghost</button>
<button type="button" class="btn sm">Small</button>
Variants
Disabled
Props
| Name | Type | Default | Description |
|---|---|---|---|
| .btn | class | — | Accent fill, white text, 8 px radius. |
| .btn.ghost | class | — | Surface fill and a line. |
| .btn.sm | class | — | Shorter padding for toolbars. |
| disabled | attribute | absent | Removes the action. |
Keyboard
| Key | Action |
|---|---|
| Enter or Space | Activates the button. |
Accessibility
- The name is the text inside the button.
- Disabled is the disabled attribute.
- :active scales to 0.97 unless motion is reduced.
Motion
- --spring-ui at 180 ms on :active.
Pattern origin
Base control in yravg-ui v1.0.