Semantic structure
Badges communicate status but should not be the only signal.
Compose existing xsh- classes on the appropriate HTML element. Keep content order meaningful when CSS is disabled.
Components / Component reference
Badges and status
Compact semantic markers, indicators and progress context.
LIVE COMPONENT REFERENCE
Badge appearances
Soft, solid, outline and default surface treatments are available; use clear labels rather than relying on color alone.
Actual Xshna CSSResize to test wrapping
SolidSoftOutlinePrimarySuccessInfoWarningDanger
HTML · COPY AND USE
<div class="xsh-ref-flex"><span class="xsh-badge xsh-badge-solid" >Solid</span><span class="xsh-badge xsh-badge-soft" >Soft</span><span class="xsh-badge xsh-badge-outline" >Outline</span><span class="xsh-badge xsh-badge-solid" data-xsh-intent="primary" >Primary</span><span class="xsh-badge xsh-badge-success" >Success</span><span class="xsh-badge xsh-badge-info" >Info</span><span class="xsh-badge xsh-badge-warning" >Warning</span><span class="xsh-badge xsh-badge-danger" >Danger</span></div>LIVE COMPONENT REFERENCE
Semantic badge intents
Intent tokens can be composed with soft and solid treatments.
Actual Xshna CSSResize to test wrapping
PrimaryNeutralSuccessWarningDangerInfoBrand
HTML · COPY AND USE
<div class="xsh-ref-flex"><span class="xsh-badge xsh-badge-soft" data-xsh-intent="primary">Primary</span><span class="xsh-badge xsh-badge-soft" data-xsh-intent="neutral">Neutral</span><span class="xsh-badge xsh-badge-soft" data-xsh-intent="success">Success</span><span class="xsh-badge xsh-badge-soft" data-xsh-intent="warning">Warning</span><span class="xsh-badge xsh-badge-soft" data-xsh-intent="danger">Danger</span><span class="xsh-badge xsh-badge-soft" data-xsh-intent="info">Info</span><span class="xsh-badge xsh-badge-soft" data-xsh-intent="brand">Brand</span></div>LIVE COMPONENT REFERENCE
Shape, size and indicator variants
Tiny, standard and large badges with pill, square and dot styles.
Actual Xshna CSSResize to test wrapping
CompactStandardLargePillSquareOnlineOperationalAttention
HTML · COPY AND USE
<div class="xsh-ref-flex"><span class="xsh-badge xsh-badge-xs" >Compact</span><span class="xsh-badge" >Standard</span><span class="xsh-badge xsh-badge-lg" >Large</span><span class="xsh-badge xsh-badge-pill" >Pill</span><span class="xsh-badge xsh-badge-square" >Square</span><span class="xsh-badge xsh-badge-dot" >Online</span><span class="xsh-status" data-xsh-status="success">Operational</span><span class="xsh-status" data-xsh-status="warning">Attention</span></div>Overview
Use xsh-badge with a semantic variant, and xsh-status with data-xsh-status when a live state needs a colored dot.
Live example
Interactive · Real framework
New
Draft
Operational
Attention
Example markup
<div class="xsh-flex xsh-flex-wrap xsh-gap-3">
<span class="xsh-badge xsh-badge-solid" data-xsh-intent="primary">New</span>
<span class="xsh-badge">Draft</span>
<span class="xsh-status" data-xsh-status="success">Operational</span>
<span class="xsh-status" data-xsh-status="warning">Attention</span>
</div>Production guidance
Never convey status exclusively by color; include readable labels.
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 |
|---|---|---|
.xsh-badge | Core component | CSS-only |
.xsh-badge-danger | Composable modifier / structure class | CSS-only |
.xsh-badge-dot | Composable modifier / structure class | CSS-only |
.xsh-badge-info | Composable modifier / structure class | CSS-only |
.xsh-badge-lg | Composable modifier / structure class | CSS-only |
.xsh-badge-outline | Composable modifier / structure class | CSS-only |
.xsh-badge-pill | Composable modifier / structure class | CSS-only |
.xsh-badge-soft | Composable modifier / structure class | CSS-only |
.xsh-badge-solid | Composable modifier / structure class | CSS-only |
.xsh-badge-square | Composable modifier / structure class | CSS-only |
.xsh-badge-success | Composable modifier / structure class | CSS-only |
.xsh-badge-warning | Composable modifier / structure class | CSS-only |
.xsh-badge-xs | Composable modifier / structure class | CSS-only |
Implementation details
Interactive behavior
Announce changing status with a suitable live region outside the badge.
Load xshna.min.js only if the documented interaction needs it. Your application remains responsible for data, persistence and business rules.
Responsive and localization
Avoid inserting interactive controls inside an inline noninteractive badge.
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.