Skip to content
VolvoVolvo Cars Web Design System

Button

Edit on GitHub

Trigger actions with filled, outlined, and text button variants. Includes the SubmitButton React component for forms.

@volvo-cars/css v2.5.1@volvo-cars/react-forms v2.0.1

Color options

Section titled “Color options”
Show codeHide code
<div class="flex flex-wrap gap-16 items-center">
  <button class="button-filled">Default</button>
  <button class="button-filled" data-color="accent">Accent</button>
  <button class="button-filled" data-color="destructive">Destructive</button>
  <button class="button-filled" data-color="subtle">Subtle</button>
</div>

Button sizes

Section titled “Button sizes”
Show codeHide code
<div class="flex flex-wrap gap-16 items-center">
  <button class="button-filled">Default</button>
  <button class="button-filled" data-size="medium">Medium</button>
  <button class="button-filled" data-size="small">Small</button>
</div>

Button Icons

Section titled “Button Icons”
Show codeHide code
import { Icon } from '@volvo-cars/react-icons';


export function ButtonIcons() {
  return (
    <div className="flex flex-wrap gap-16 items-center">
      <button className="button-filled" data-arrow="none" type="button">
        <Icon icon="external-link" size={16} color="currentColor" />
        <span>Open link</span>
      </button>
      <button className="button-outlined" data-arrow="none" type="button">
        <span>Download</span>
        <Icon icon="download" size={16} color="currentColor" />
      </button>
      <button className="button-text" data-arrow="none" type="button">
        <Icon icon="heart" size={16} color="currentColor" />
        <span>Favourite</span>
      </button>
    </div>
  );
}
Section titled “Links styled as buttons”
Filled link Outlined link Text link
Show codeHide code
<div class="flex flex-wrap gap-16 items-center">
  <a class="button-filled" href="#">Filled link</a>
  <a class="button-outlined" href="#">Outlined link</a>
  <a class="button-text" href="#">Text link</a>
</div>

Alignment

Section titled “Alignment”
Show codeHide code
<div class="flex flex-col gap-24">
  <div class="button-group justify-start">
    <button type="button" class="button-filled">Left</button>
    <button type="button" class="button-filled" data-color="subtle">
      Aligned
    </button>
  </div>
  <div class="button-group justify-center">
    <button type="button" class="button-filled">Center</button>
    <button type="button" class="button-filled" data-color="subtle">
      Aligned
    </button>
  </div>
  <div class="button-group justify-end">
    <button type="button" class="button-filled">Right</button>
    <button type="button" class="button-filled" data-color="subtle">
      Aligned
    </button>
  </div>
</div>

Mixed button variants

Section titled “Mixed button variants”
Show codeHide code
<div class="button-group">
  <button type="button" class="button-filled">Continue</button>
  <button type="button" class="button-text">Cancel</button>
</div>

Three-button group

Section titled “Three-button group”
Show codeHide code
<div class="button-group">
  <button type="button" class="button-filled">Save</button>
  <button type="button" class="button-filled" data-color="subtle">
    Preview
  </button>
  <button type="button" class="button-text">Cancel</button>
</div>

Loading state

Section titled “Loading state”
Show codeHide code
<div class="flex flex-wrap gap-16 items-center">
  <button class="button-filled" data-loading="true">
    <span class="invisible">Loading</span>
    <progress class="spinner" aria-label="Loading"></progress>
  </button>
  <button class="button-outlined" data-loading="true">
    <span class="invisible">Loading</span>
    <progress class="spinner" aria-label="Loading"></progress>
  </button>
</div>

Disabled state

Section titled “Disabled state”
Show codeHide code
<div class="flex flex-wrap gap-16 items-center">
  <button class="button-filled" aria-disabled="true">Filled</button>
  <button class="button-outlined" aria-disabled="true">Outlined</button>
  <button class="button-text" aria-disabled="true">Text</button>
</div>

Submit Button Loading

Section titled “Submit Button Loading”
Show codeHide code
import { SubmitButton } from '@volvo-cars/react-forms';


export function SubmitButtonLoading() {
  return (
    <div className="flex flex-wrap gap-16">
      <SubmitButton type="button" loading loadingLabel="Submitting">
        Submit
      </SubmitButton>
      <SubmitButton
        type="button"
        variant="outlined"
        loading
        loadingLabel="Submitting"
      >
        Submit
      </SubmitButton>
    </div>
  );
}