Semantic structure
Use a native button for actions, an anchor for navigation.
Compose existing xsh- classes on the appropriate HTML element. Keep content order meaningful when CSS is disabled.
Components / Component reference
Buttons
Buttons in primary, secondary, ghost and status styles, with sizes, icon controls and disabled states.
LIVE COMPONENT REFERENCE
All available button appearances
Every shipped appearance modifier is displayed side by side. Combine the base class with exactly one appearance treatment; choose a semantic intent independently when supported.
Actual Xshna CSSResize to test wrapping
HTML · COPY AND USE
<div class="xsh-ref-flex"><button type="button" class="xsh-btn xsh-btn-primary" >Primary</button><button type="button" class="xsh-btn xsh-btn-secondary" >Secondary</button><button type="button" class="xsh-btn xsh-btn-outline" >Outline</button><button type="button" class="xsh-btn xsh-btn-soft" >Soft</button><button type="button" class="xsh-btn xsh-btn-ghost" >Ghost</button><button type="button" class="xsh-btn xsh-btn-tonal" >Tonal</button><button type="button" class="xsh-btn xsh-btn-elevated" >Elevated</button><button type="button" class="xsh-btn xsh-btn-gradient" >Gradient</button><button type="button" class="xsh-btn xsh-btn-dashed" >Dashed</button><button type="button" class="xsh-btn xsh-btn-link" >Link</button><button type="button" class="xsh-btn xsh-btn-danger" >Danger</button><button type="button" class="xsh-btn xsh-btn-glass" >Glass</button></div>LIVE COMPONENT REFERENCE
Complete size scale
Seven shipped size modifiers, from compact table actions to prominent call-to-action elements. Ensure touch targets remain large enough for the actual context.
Actual Xshna CSSResize to test wrapping
HTML · COPY AND USE
<div class="xsh-ref-flex"><button type="button" class="xsh-btn xsh-btn-primary xsh-btn-2xs" >2XS</button><button type="button" class="xsh-btn xsh-btn-primary xsh-btn-xs" >XS</button><button type="button" class="xsh-btn xsh-btn-primary xsh-btn-sm" >SM</button><button type="button" class="xsh-btn xsh-btn-primary xsh-btn-md" >MD</button><button type="button" class="xsh-btn xsh-btn-primary xsh-btn-lg" >LG</button><button type="button" class="xsh-btn xsh-btn-primary xsh-btn-xl" >XL</button><button type="button" class="xsh-btn xsh-btn-primary xsh-btn-2xl" >2XL</button></div>LIVE COMPONENT REFERENCE
Semantic intents
Intents control contextual color through data-xsh-intent. Color alone must not communicate an error or success.
Actual Xshna CSSResize to test wrapping
HTML · COPY AND USE
<div class="xsh-ref-flex"><button type="button" class="xsh-btn xsh-btn-soft" data-xsh-intent="primary">Primary</button><button type="button" class="xsh-btn xsh-btn-soft" data-xsh-intent="neutral">Neutral</button><button type="button" class="xsh-btn xsh-btn-soft" data-xsh-intent="success">Success</button><button type="button" class="xsh-btn xsh-btn-soft" data-xsh-intent="warning">Warning</button><button type="button" class="xsh-btn xsh-btn-soft" data-xsh-intent="danger">Danger</button><button type="button" class="xsh-btn xsh-btn-soft" data-xsh-intent="info">Info</button><button type="button" class="xsh-btn xsh-btn-soft" data-xsh-intent="brand">Brand</button></div>LIVE COMPONENT REFERENCE
Shapes, icons and states
Disabled, pending, pill, square, full-width and grouped actions are separate concerns. Loading is a visual state; application code still controls the actual asynchronous task.
Actual Xshna CSSResize to test wrapping
HTML · COPY AND USE
<div class="xsh-ref-flex"><button type="button" class="xsh-btn xsh-btn-primary xsh-btn-pill" >Pill</button><button type="button" class="xsh-btn xsh-btn-outline xsh-btn-square xsh-btn-icon" aria-label="Open link">↗</button><button type="button" class="xsh-btn xsh-btn-primary" data-xsh-loading="true" aria-busy="true">Loading</button><button type="button" class="xsh-btn xsh-btn-primary" disabled>Disabled</button><span class="xsh-btn-split"><button type="button" class="xsh-btn xsh-btn-primary" >Export</button><button type="button" class="xsh-btn xsh-btn-primary" aria-label="More export actions">▾</button></span></div><div style="margin-top:12px"><button type="button" class="xsh-btn xsh-btn-primary xsh-btn-full" >Full-width action</button></div>Overview
Use a native button or appropriate anchor with xsh-btn and a variant class. Use aria-disabled only if you must keep an otherwise disabled link focusable.
Live example
Interactive · Real frameworkExample markup
<div class="xsh-flex xsh-flex-wrap xsh-items-center xsh-gap-3">
<button class="xsh-btn xsh-btn-primary">Primary</button>
<button class="xsh-btn xsh-btn-secondary">Secondary</button>
<button class="xsh-btn xsh-btn-ghost">Ghost</button>
<button class="xsh-btn xsh-btn-primary" disabled>Disabled</button>
</div>Production guidance
Do not use clickable divs in place of native buttons.
Customize this component through --xsh-* CSS tokens, data-xsh-* configuration attributes and documented xsh-* utilities. Use the optional JavaScript distribution only when an interactive behavior is needed.
Build with confidenceOpen interactive design playground →
Complete selector inventory
These selectors exist in the current distribution. An entry in this table does not imply that arbitrary modifier combinations are meaningful; use the examples above for the intended composition.
| Class | Purpose | Delivery |
|---|
Implementation details
Interactive behavior
Disabled buttons do not receive focus; for pending actions expose aria-busy and prevent duplicate submissions in application code.
Load xshna.min.js only if the documented interaction needs it. Your application remains responsible for data, persistence and business rules.
Responsive and localization
Keep tap targets comfortable on touch devices and provide accessible names for icon-only buttons.
Test 320px-wide viewports, container-constrained instances, keyboard zoom, longer translations and right-to-left text where relevant.
Theme and customization
Use --xsh-* CSS variables for theme values and data-xsh-design / data-xsh-density on the xsh-app root.
Prefer design tokens over hard-coded overrides so components remain coherent across personalities.
What to verify before shipping
- Confirm every documented class used by the feature exists in the release CSS.
- Navigate controls using Tab, Shift+Tab, Enter, Space and Escape where appropriate.
- Test with reduced motion, high contrast, 200% text zoom and a narrow mobile viewport.
- Verify disabled, loading, empty, error and long-content states where relevant.
- Check actual application behavior independently of the preview: these examples use illustrative data.