Button

Buttons are interactive elements that trigger actions when clicked. They communicate the action that will occur when the user interacts with them.

Usage

Use buttons for actions in forms, dialogs, and more. Buttons can contain text, icons, or both.

Variants

Primary

Primary buttons are for the main action on a page. Use sparingly—typically one per section.

<button class="df-button df-button--primary">Primary Button</button>

Secondary

Secondary buttons are for secondary actions that complement the primary action.

<button class="df-button df-button--secondary">Secondary Button</button>

Outline

Outline buttons are for less prominent actions or when you need a lighter visual weight.

<button class="df-button df-button--outline">Outline Button</button>

Ghost

Ghost buttons are for the least prominent actions, often used in toolbars or navigation.

<button class="df-button df-button--ghost">Ghost Button</button>

Sizes

Buttons come in three sizes: small, medium (default), and large.

<button class="df-button df-button--primary df-button--sm">Small</button>
<button class="df-button df-button--primary">Medium</button>
<button class="df-button df-button--primary df-button--lg">Large</button>

States

Disabled

Disabled buttons indicate that an action is not currently available.

<button class="df-button df-button--primary" disabled>Disabled</button>

Loading

Show a loading state when an action is in progress.

<button class="df-button df-button--primary df-button--loading">
  <span class="df-button__spinner"></span>
  Loading...
</button>

With Icons

Buttons can include icons before or after the text.

<button class="df-button df-button--primary">
  <svg><!-- icon --></svg>
  Add Item
</button>

Icon-Only Buttons

For icon-only buttons, include an aria-label for accessibility.

<button class="df-button df-button--primary df-button--icon" aria-label="Add">
  <svg><!-- icon --></svg>
</button>

Button Groups

Group related buttons together.

<div class="df-button-group">
  <button class="df-button df-button--outline">Left</button>
  <button class="df-button df-button--outline">Center</button>
  <button class="df-button df-button--outline">Right</button>
</div>

Full Width

Make buttons span the full width of their container.

<button class="df-button df-button--primary df-button--block">
  Full Width Button
</button>

Accessibility

• Use <button> for actions and <a> for navigation
• Always provide visible focus states (built-in)
• Use aria-label for icon-only buttons
• Ensure sufficient color contrast (WCAG AA)
• Don't disable buttons without explanation

Best Practices

• Use clear, action-oriented labels ("Save Changes" not "Submit")
• Limit primary buttons to one per section
• Consider the visual hierarchy of actions
• Provide loading states for async actions

API Reference

Classes

Class	Description
df-button	Base button class (required)
df-button--primary	Primary variant
df-button--secondary	Secondary variant
df-button--outline	Outline variant
df-button--ghost	Ghost variant
df-button--sm	Small size
df-button--lg	Large size
df-button--icon	Icon-only button
df-button--block	Full-width button
df-button--loading	Loading state

CSS Custom Properties

Property	Default	Description
--df-button-padding-x	1.25rem	Horizontal padding
--df-button-padding-y	0.625rem	Vertical padding
--df-button-font-size	0.875rem	Font size
--df-button-font-weight	500	Font weight
--df-button-radius	0.375rem	Border radius