Shared control geometry for buttons and button-shaped links. These classes belong to the opt-in Official preset. Add
@presets "standard,official"; to the CSS entry. Standard supplies the utilities, palette, and preflight
used alongside these structural shortcuts.
Classes
btn
Example
The markup below shows the structure. Follow the linked Storybook specimen for its complete styling and, where relevant, interactive behavior.
<button class="btn" type="button">Save changes</button>
<a class="btn" href="/settings">Settings</a>Variants and composition
The same btn class works on a native button or an anchor. Native disabled, aria-disabled, aria-pressed, and optional press-scale have different behavior contracts.
Behavior and accessibility
The class provides structure, not action state or colors. Native disabled blocks activation; aria-disabled needs consumer event handling. Give icon-only controls a name.
Reference
See the interactive Storybook specimen. Continue to Calendar or return to the Official preset overview.