xsh-btn
FRAMEWORK REFERENCE / ADVANCED INDEX
Component variant atlas
Browse every documented appearance and sizing selector for the major component families. Click through for behavior, accessibility and full markup.
Ready
Every card below uses a selector present in the shipped framework source. These are individual modifiers; do not infer that all modifiers can be combined arbitrarily. For complex interactive components use their dedicated documentation and JavaScript reference.
Button treatments
Detailed guide ↗xsh-btn-2xl
xsh-btn-2xs
xsh-btn-block
xsh-btn-danger
xsh-btn-dashed
xsh-btn-elevated
xsh-btn-full
xsh-btn-ghost
xsh-btn-glass
xsh-btn-gradient
xsh-btn-group
xsh-btn-icon
xsh-btn-lg
xsh-btn-link
xsh-btn-md
xsh-btn-outline
xsh-btn-pill
xsh-btn-primary
xsh-btn-secondary
xsh-btn-sm
xsh-btn-soft
xsh-btn-split
xsh-btn-square
xsh-btn-tonal
xsh-btn-xl
xsh-btn-xs
Badge styles
Detailed guide ↗Preview
Preview
Preview
Preview
Preview
Preview
Preview
Preview
Preview
Preview
Preview
Preview
Preview
Card compositions
Detailed guide ↗Surface variant
Surface variant
Surface variant
Surface variant
Surface variant
Surface variant
Surface variant
Surface variant
Surface variant
Alerts
Detailed guide ↗InformationUseful feedback
InformationUseful feedback
InformationUseful feedback
InformationUseful feedback
InformationUseful feedback
InformationUseful feedback
InformationUseful feedback
Avatars
Detailed guide ↗X
X
X
X
Chips
Detailed guide ↗Design token