Button Variants
Core button styles for different semantic purposes and visual hierarchy.
Primary Button
Use for primary actions and calls-to-action. High visual prominence.
HTML
<button class="ss-c-button ss-c-button--primary">Primary Action</button>
<button class="ss-c-button ss-c-button--primary" disabled>Disabled</button>Secondary Button
For secondary actions that complement the primary action.
HTML
<button class="ss-c-button ss-c-button--secondary">Secondary</button>
<button class="ss-c-button ss-c-button--secondary" disabled>Disabled</button>Outline Button
Bordered button with transparent background for subtle emphasis.
HTML
<button class="ss-c-button ss-c-button--outline">Outline</button>
<button class="ss-c-button ss-c-button--outline" disabled>Disabled</button>Ghost Button
Minimal button with no border, ideal for toolbars and navigation.
HTML
<button class="ss-c-button ss-c-button--ghost">Ghost</button>
<button class="ss-c-button ss-c-button--ghost" disabled>Disabled</button>Link Button
Styled as a link but with button semantics.
HTML
<button class="ss-c-button ss-c-button--link">Link Button</button>
<button class="ss-c-button ss-c-button--link" disabled>Disabled</button>Solid Button
Filled background with inverted text color.
HTML
<button class="ss-c-button ss-c-button--solid">Solid</button>
<button class="ss-c-button ss-c-button--solid" disabled>Disabled</button>Accent Button
Uses the accent color for special emphasis.
HTML
<button class="ss-c-button ss-c-button--accent">Accent</button>
<button class="ss-c-button ss-c-button--accent" disabled>Disabled</button>Clear Button
Transparent background with text color only.
HTML
<button class="ss-c-button ss-c-button--clear">Clear</button>
<button class="ss-c-button ss-c-button--clear" disabled>Disabled</button>Status Variants
Semantic status buttons for success, warning, danger, and info actions.
Success Button
Indicates positive or successful actions like save, confirm, or complete.
HTML
<button class="ss-c-button ss-c-button--success">Success</button>
<button class="ss-c-button ss-c-button--success" disabled>Disabled</button>Warning Button
For actions that require caution or attention.
HTML
<button class="ss-c-button ss-c-button--warning">Warning</button>
<button class="ss-c-button ss-c-button--warning" disabled>Disabled</button>Danger Button
For destructive or irreversible actions like delete or remove.
HTML
<button class="ss-c-button ss-c-button--danger">Danger</button>
<button class="ss-c-button ss-c-button--danger" disabled>Disabled</button>Info Button
For informational actions or links to help content.
HTML
<button class="ss-c-button ss-c-button--info">Info</button>
<button class="ss-c-button ss-c-button--info" disabled>Disabled</button>Button Sizes
Five size options from extra-small to extra-large for different contexts.
Size Comparison
HTML
<button class="ss-c-button ss-c-button--primary ss-c-button--size-xs">
Extra Small
</button>
<button class="ss-c-button ss-c-button--primary ss-c-button--size-sm">Small</button>
<button class="ss-c-button ss-c-button--primary ss-c-button--size-md">Medium</button>
<button class="ss-c-button ss-c-button--primary ss-c-button--size-lg">Large</button>
<button class="ss-c-button ss-c-button--primary ss-c-button--size-xl">
Extra Large
</button>Sizes with Icons
HTML
<button class="ss-c-button ss-c-button--primary ss-c-button--size-xs">
<span>↯</span>
XS
</button>
<button class="ss-c-button ss-c-button--primary ss-c-button--size-sm">
<span>↯</span>
Small
</button>
<button class="ss-c-button ss-c-button--primary ss-c-button--size-md">
<span>↯</span>
Medium
</button>
<button class="ss-c-button ss-c-button--primary ss-c-button--size-lg">
<span>↯</span>
Large
</button>
<button class="ss-c-button ss-c-button--primary ss-c-button--size-xl">
<span>↯</span>
Extra Large
</button>Button Shapes
Different border radius options for various design contexts.
Shape Variants
HTML
<button class="ss-c-button ss-c-button--primary">Default</button>
<button class="ss-c-button ss-c-button--primary ss-c-button--rounded">Rounded</button>
<button class="ss-c-button ss-c-button--primary ss-c-button--pill">Pill Shape</button>
<button class="ss-c-button ss-c-button--primary ss-c-button--square">Square</button>Icon Buttons
Square aspect ratio buttons for icon-only use cases.
HTML
<button
class="ss-c-button ss-c-button--primary ss-c-button--icon"
aria-label="Search"
>
⌕
</button>
<button
class="ss-c-button ss-c-button--secondary ss-c-button--icon"
aria-label="Settings"
>
⚙
</button>
<button class="ss-c-button ss-c-button--outline ss-c-button--icon" aria-label="Edit">
✎
</button>
<button class="ss-c-button ss-c-button--ghost ss-c-button--icon" aria-label="Close">
✕
</button>Button States
Interactive states and special button behaviors.
Disabled State
Buttons can be disabled using the
disabled
attribute or
.button--disabled
class.
HTML
<button class="ss-c-button ss-c-button--primary" disabled>
Disabled (attr)
</button>
<button class="ss-c-button ss-c-button--primary ss-c-button--disabled">
Disabled (class)
</button>Loading State
Shows a spinner and makes the button non-interactive during async operations.
HTML
<button class="ss-c-button ss-c-button--primary ss-c-button--loading">Loading</button>
<button class="ss-c-button ss-c-button--secondary ss-c-button--loading">
Processing
</button>
<button class="ss-c-button ss-c-button--accent ss-c-button--loading">Saving</button>Full Width / Block
Buttons that span the full width of their container.
HTML
<button class="ss-c-button ss-c-button--primary ss-c-button--block">
Full Width Primary
</button>
<button class="ss-c-button ss-c-button--secondary ss-c-button--block">
Full Width Secondary
</button>Buttons with Icons
Combine text and icons for enhanced visual communication.
Leading Icons
Icon appears before the text label.
HTML
<button class="ss-c-button ss-c-button--primary">
<span aria-hidden="true">⌕</span>
<span>Search</span>
</button>
<button class="ss-c-button ss-c-button--secondary">
<span aria-hidden="true">▤</span>
<span>Open File</span>
</button>
<button class="ss-c-button ss-c-button--success">
<span aria-hidden="true">✓</span>
<span>Save</span>
</button>Trailing Icons
Icon appears after the text label.
HTML
<button class="ss-c-button ss-c-button--primary">
<span>Download</span>
<span aria-hidden="true">⬇</span>
</button>
<button class="ss-c-button ss-c-button--secondary">
<span>Next</span>
<span aria-hidden="true">→</span>
</button>
<button class="ss-c-button ss-c-button--outline">
<span>External Link</span>
<span aria-hidden="true">↗</span>
</button>Icon Only (with accessible label)
Use
aria-label
for accessibility when using icon-only buttons.
HTML
<button
class="ss-c-button ss-c-button--primary ss-c-button--icon"
aria-label="Add item"
>
+
</button>
<button class="ss-c-button ss-c-button--danger ss-c-button--icon" aria-label="Delete">
␡
</button>
<button
class="ss-c-button ss-c-button--ghost ss-c-button--icon"
aria-label="More options"
>
⋮
</button>
<button
class="ss-c-button ss-c-button--outline ss-c-button--icon"
aria-label="Refresh"
>
↻
</button>Button Groups
Group related buttons together for segmented controls or toolbars.
Horizontal Group
HTML
<div class="ss-c-button-group">
<button class="ss-c-button ss-c-button--primary">Left</button>
<button class="ss-c-button ss-c-button--primary">Center</button>
<button class="ss-c-button ss-c-button--primary">Right</button>
</div>Outline Group
HTML
<div class="ss-c-button-group">
<button class="ss-c-button ss-c-button--outline">Option A</button>
<button class="ss-c-button ss-c-button--outline">Option B</button>
<button class="ss-c-button ss-c-button--outline">Option C</button>
</div>Vertical Group
HTML
<div class="ss-c-button-group--vertical">
<button class="ss-c-button ss-c-button--secondary">First</button>
<button class="ss-c-button ss-c-button--secondary">Second</button>
<button class="ss-c-button ss-c-button--secondary">Third</button>
</div>Mixed Group (Actions)
HTML
<div class="ss-c-button-group">
<button class="ss-c-button ss-c-button--success">Save</button>
<button class="ss-c-button ss-c-button--secondary">Preview</button>
<button class="ss-c-button ss-c-button--danger">Delete</button>
</div>Switch / Toggle Buttons
Toggle switches for on/off states.
Rectangular Switch
HTML
<label class="ss-c-switch">
<input type="checkbox" />
<span class="ss-c-slider"></span>
</label>
<label class="ss-c-switch">
<input type="checkbox" checked />
<span class="ss-c-slider"></span>
</label>Rounded Switch
HTML
<label class="ss-c-switch">
<input type="checkbox" />
<span class="ss-c-slider ss-c-round"></span>
</label>
<label class="ss-c-switch">
<input type="checkbox" checked />
<span class="ss-c-slider ss-c-round"></span>
</label>Switch with Labels
Off
On
HTML
<div style="display: flex; align-items: center; gap: 12px">
<span>Off</span>
<label class="ss-c-switch">
<input type="checkbox" />
<span class="ss-c-slider ss-c-round"></span>
</label>
<span>On</span>
</div>Button-Styled Links
Apply button classes to anchor elements for navigation that looks like buttons.
Link as Button
HTML
<a href="#" class="ss-c-button ss-c-button--primary">Primary Link</a>
<a href="#" class="ss-c-button ss-c-button--secondary">Secondary Link</a>
<a href="#" class="ss-c-button ss-c-button--outline">Outline Link</a>Accessibility
Best practices for accessible button implementation.
ARIA Attributes
HTML
<!-- Pressed state for toggle buttons -->
<button class="ss-c-button ss-c-button--primary" aria-pressed="true">
Toggle (On)
</button>
<button class="ss-c-button ss-c-button--outline" aria-pressed="false">
Toggle (Off)
</button>
<!-- Busy state for loading -->
<button
class="ss-c-button ss-c-button--primary ss-c-button--loading"
aria-busy="true"
>
Loading...
</button>
<!-- Expanded state for dropdowns -->
<button
class="ss-c-button ss-c-button--secondary"
aria-expanded="false"
aria-haspopup="true"
>
Menu ▼
</button>Focus Visible
Tab through these buttons to see the focus indicator.
HTML
<button class="ss-c-button ss-c-button--primary">Focusable 1</button>
<button class="ss-c-button ss-c-button--secondary">Focusable 2</button>
<button class="ss-c-button ss-c-button--outline">Focusable 3</button>Combining Classes
Mix and match variants, sizes, and shapes for customized buttons.
Size + Shape + Variant
HTML
<button class="ss-c-button ss-c-button--primary ss-c-button--size-lg ss-c-button--pill">
Large Pill Primary
</button>
<button class="ss-c-button ss-c-button--success ss-c-button--size-sm ss-c-button--rounded">
Small Rounded Success
</button>
<button class="ss-c-button ss-c-button--danger ss-c-button--size-xl ss-c-button--square">
XL Square Danger
</button>Full Width with Loading
HTML
<button
class="ss-c-button ss-c-button--primary ss-c-button--block ss-c-button--loading ss-c-button--size-lg"
>
Submitting Form...
</button>Animated buttons with flip effects on hover and interaction.
Basic Flipper Button
HTML
<button
class="ss-c-flipper"
style="
position: relative;
padding: 14px 28px;
border: none;
background: var(--color_fill_primary);
color: white;
cursor: pointer;
overflow: hidden;
border-radius: 8px;
font-size: 16px;
perspective: 1000px;
"
>
<span
class="ss-c-flipper--front"
style="display: block; transition: transform 0.3s"
>
Click Me
</span>
<span
class="ss-c-flipper--back"
style="
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotateX(90deg);
opacity: 0;
transition: all 0.3s;
"
>
Done! ✓
</span>
</button>Flip Directions
HTML
<div style="display: flex; gap: 16px; flex-wrap: wrap">
<!-- Flip Left -->
<button
class="ss-c-flipper ss-c-flipper--left"
style="
position: relative;
min-width: 120px;
padding: 14px 24px;
border: 2px solid var(--color_fill_primary);
background: transparent;
color: var(--color_fill_primary);
cursor: pointer;
overflow: hidden;
border-radius: 8px;
transition: all 0.3s;
"
>
<span>Flip Left ←</span>
</button>
<!-- Flip Right -->
<button
class="ss-c-flipper ss-c-flipper--right"
style="
position: relative;
min-width: 120px;
padding: 14px 24px;
border: 2px solid var(--color_fill_primary);
background: transparent;
color: var(--color_fill_primary);
cursor: pointer;
overflow: hidden;
border-radius: 8px;
transition: all 0.3s;
"
>
<span>Flip Right →</span>
</button>
<!-- Flip Up -->
<button
class="ss-c-flipper ss-c-flipper--up"
style="
position: relative;
min-width: 120px;
padding: 14px 24px;
border: 2px solid var(--color_fill_primary);
background: transparent;
color: var(--color_fill_primary);
cursor: pointer;
overflow: hidden;
border-radius: 8px;
transition: all 0.3s;
"
>
<span>Flip Up ↑</span>
</button>
<!-- Flip Down -->
<button
class="ss-c-flipper ss-c-flipper--down"
style="
position: relative;
min-width: 120px;
padding: 14px 24px;
border: 2px solid var(--color_fill_primary);
background: transparent;
color: var(--color_fill_primary);
cursor: pointer;
overflow: hidden;
border-radius: 8px;
transition: all 0.3s;
"
>
<span>Flip Down ↓</span>
</button>
</div>Icon Flipper
HTML
<div style="display: flex; gap: 16px; flex-wrap: wrap">
<button
class="ss-c-flipper"
style="
position: relative;
width: 56px;
height: 56px;
border: none;
background: var(--color_state_success);
color: white;
cursor: pointer;
overflow: hidden;
border-radius: 50%;
font-size: 20px;
transition:
transform 0.3s,
box-shadow 0.3s;
"
>
<span class="ss-c-flipper--front">✓</span>
</button>
<button
class="ss-c-flipper"
style="
position: relative;
width: 56px;
height: 56px;
border: none;
background: var(--color_state_error);
color: white;
cursor: pointer;
overflow: hidden;
border-radius: 50%;
font-size: 20px;
transition:
transform 0.3s,
box-shadow 0.3s;
"
>
<span class="ss-c-flipper--front">✕</span>
</button>
<button
class="ss-c-flipper"
style="
position: relative;
width: 56px;
height: 56px;
border: none;
background: var(--color_state_info);
color: white;
cursor: pointer;
overflow: hidden;
border-radius: 50%;
font-size: 20px;
transition:
transform 0.3s,
box-shadow 0.3s;
"
>
<span class="ss-c-flipper--front">ℹ</span>
</button>
</div>Toggle Flipper
HTML
<div style="display: flex; gap: 16px; flex-wrap: wrap">
<!-- Play/Pause Toggle -->
<button
class="ss-c-flipper ss-c-toggle"
style="
position: relative;
width: 64px;
height: 64px;
border: 2px solid var(--color_fill_primary);
background: transparent;
color: var(--color_fill_primary);
cursor: pointer;
overflow: hidden;
border-radius: 12px;
font-size: 24px;
transition: all 0.3s;
"
data-state="play"
>
<span class="ss-c-flipper--front">▶</span>
<span class="ss-c-flipper--back" style="display: none">⏸</span>
</button>
<!-- Like Toggle -->
<button
class="ss-c-flipper ss-c-toggle"
style="
position: relative;
width: 64px;
height: 64px;
border: 2px solid var(--color_state_error);
background: transparent;
color: var(--color_state_error);
cursor: pointer;
overflow: hidden;
border-radius: 12px;
font-size: 24px;
transition: all 0.3s;
"
>
<span class="ss-c-flipper--front">♡</span>
<span class="ss-c-flipper--back" style="display: none">♥</span>
</button>
<!-- Bookmark Toggle -->
<button
class="ss-c-flipper ss-c-toggle"
style="
position: relative;
width: 64px;
height: 64px;
border: 2px solid var(--color_state_warning);
background: transparent;
color: var(--color_state_warning);
cursor: pointer;
overflow: hidden;
border-radius: 12px;
font-size: 24px;
transition: all 0.3s;
"
>
<span class="ss-c-flipper--front">☆</span>
<span class="ss-c-flipper--back" style="display: none">★</span>
</button>
</div>3D Card Flip
HTML
<div
class="ss-c-flipper-card"
style="perspective: 1000px; width: 200px; height: 280px"
>
<div
style="
position: relative;
width: 100%;
height: 100%;
transition: transform 0.6s;
transform-style: preserve-3d;
cursor: pointer;
"
>
<div
class="ss-c-flipper--front"
style="
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
background: linear-gradient(
135deg,
var(--color_fill_primary),
var(--color_fill_secondary)
);
border-radius: 16px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: white;
padding: 24px;
box-sizing: border-box;
"
>
<div style="font-size: 48px; margin-bottom: 16px">▭</div>
<div style="font-size: 18px; font-weight: 600">
Hover to Flip
</div>
</div>
<div
class="ss-c-flipper--back"
style="
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
transform: rotateY(180deg);
background: var(--color_fill_secondary);
border-radius: 16px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 24px;
box-sizing: border-box;
"
>
<div style="font-size: 24px; margin-bottom: 12px">✺</div>
<div
style="
font-size: 16px;
font-weight: 600;
margin-bottom: 8px;
"
>
Back Side
</div>
<p
style="
font-size: 13px;
opacity: 0.8;
text-align: center;
margin: 0;
"
>
This is the revealed content on the back of the card.
</p>
</div>
</div>
</div>