Button

cds-button

The Button component is a versatile UI element used to trigger actions or navigate users through the interface. It supports multiple variants, sizes, and states to adapt to a variety of use cases.

Default

• Variant: --secondary
• Size: --medium

Default button

<button class="cds-button">
  <span class="cds-button__icon cds-ph-coffee"></span>
  <span class="cds-button__text">Click Me</span>
</button>

---

Elements

Element	Code	Parent	HTML tag	Required
Icon	cds-button__icon	Block: cds-button	<span>	required
Text	cds-button__text	Block: cds-button	<span>	required

<button class="cds-button">
  <span class="cds-button__text">Only text</span>
</button>

<button class="cds-button">
  <span class="cds-button__icon cds-ph-coffee"></span>
  <span class="cds-button__text">Default button</span>
</button>

<button class="cds-button">
  <span class="cds-button__text">Directional button</span>
  <span class="cds-button__icon cds-ph-arrow-right"></span>
</button>

<button class="cds-button">
  <span class="cds-button__icon cds-ph-coffee"></span>
</button>

---

Modifiers

Modifier	Options
Variant	--accent, --primary, --secondary, --tertiary
Size	--large, --medium, --small

Variant

Example

<button class="cds-button cds-button--primary">
  <span class="cds-button__icon cds-ph-coffee"></span>
  <span class="cds-button__text">Primary</span>
</button>

Size

Example

<button class="cds-button cds-button--small">
  <span class="cds-button__icon cds-ph-coffee"></span>
  <span class="cds-button__text">Small</span>
</button>

---

States

Modifier	Options
States	is-disabled, is-loading, is-selected, is-danger

Is disabled

Example

<button class="cds-button cds-button--primary is-disabled">
  <span class="cds-button__icon cds-ph-coffee"></span>
  <span class="cds-button__text">Disabled</span>
</button>

Is loading

Example

<button class="cds-button cds-button--primary is-loading">
  <span class="cds-button__icon cds-ph-coffee"></span>
  <span class="cds-button__text">Loading</span>
</button>

Is selected

Example

<button class="cds-button cds-button--primary is-selected">
  <span class="cds-button__icon cds-ph-coffee"></span>
  <span class="cds-button__text">Selected</span>
</button>

Is danger

Example

<button class="cds-button cds-button--primary is-danger">
  <span class="cds-button__icon cds-ph-trash"></span>
  <span class="cds-button__text">Danger</span>
</button>

---

Group container

cds-button-group

Example

<div class="cds-button-group">
  <!-- Buttons -->
</div>