Skip to main content
🏠ComponentsButtonVersion: Next

Button

Buttons are the primary components for displaying actions on a page. They are often referenced as Call To Actions (CTA/C2A).

Filled button​

Solid buttons are the main call to action on any page.

Filled action

<button class="qtm-button qtm-filled qtm-primary">Filled action</button>

Color​

Filled buttons are available in 4 colors: primary, success, warning and danger.

Primary Filled action

Success Filled action

Warning Filled action

Danger Filled action

<button class="qtm-button qtm-filled qtm-primary">Primary Filled action</button>
<button class="qtm-button qtm-filled qtm-success">Success Filled action</button>
<button class="qtm-button qtm-filled qtm-warning">Warning Filled action</button>
<button class="qtm-button qtm-filled qtm-danger">Danger Filled action</button>

Outline button​

Outline buttons are for secondary call to actions on any page.

Outline action

<button class="qtm-button qtm-outline qtm-primary">Outline action</button>

Color​

Outline buttons are available in 5 colors: primary, neutral, success, warning and danger.

Primary Outline action

Neutral Outline action

Success Outline action

Warning Outline action

Danger Outline action

<button class="qtm-button qtm-outline qtm-primary">Primary Outline action</button>
<button class="qtm-button qtm-outline qtm-neutral">Neutral Outline action</button>
<button class="qtm-button qtm-outline qtm-success">Success Outline action</button>
<button class="qtm-button qtm-outline qtm-warning">Warning Outline action</button>
<button class="qtm-button qtm-outline qtm-danger">Danger Outline action</button>

Ghost button​

Ghost buttons are for miscellaneous actions on any page.

Ghost action

<button class="qtm-button qtm-ghost qtm-primary">Ghost action</button>

Color​

Ghost buttons are available in three colors: primary, neutral and inverted.

Primary Ghost action

<button class="qtm-button qtm-ghost qtm-primary">Primary Ghost action</button>

Neutral Ghost action

<button class="qtm-button qtm-ghost qtm-neutral">Neutral Ghost action</button>

Inverted Ghost action

<button class="qtm-button qtm-ghost qtm-inverted">Inverted Ghost action</button>

Disable state​

Filled action

Outline action

Primary Ghost action

Neutral Ghost action

<button class="qtm-button qtm-filled qtm-primary" disabled>Filled action</button>
<button class="qtm-button qtm-outline qtm-primary" disabled>Outline action</button>
<button class="qtm-button qtm-ghost qtm-primary" disabled>
  Primary Ghost action
</button>
<button class="qtm-button qtm-ghost qtm-neutral" disabled>
  Neutral Ghost action
</button>

Sizes​

SmallMediumLargeXlarge
<button class="qtm-button qtm-small">Small</button>
<button class="qtm-button qtm-medium">Medium</button>
<button class="qtm-button qtm-large">Large</button>
<button class="qtm-button qtm-xlarge">Xlarge</button>

Icons​

Text and icon in button​

SmallMediumLargeXlarge
<button class="qtm-button qtm-small">
  <i class="material-icons qtm-icon">account_circle</i>
  <span>Small</span>
</button>
<button class="qtm-button qtm-medium">
  <i class="material-icons qtm-icon">account_circle</i>
  <span>Medium</span>
</button>
<button class="qtm-button qtm-large">
  <i class="material-icons qtm-icon">account_circle</i>
  <span>Large</span>
</button>
<button class="qtm-button qtm-xlarge">
  <i class="material-icons qtm-icon">account_circle</i>
  <span>Xlarge</span>
</button>

Icon in button​

<button class="qtm-button qtm-small">
  <i class="material-icons qtm-icon">account_circle</i>
</button>
<button class="qtm-button qtm-medium">
  <i class="material-icons qtm-icon">account_circle</i>
</button>
<button class="qtm-button qtm-large">
  <i class="material-icons qtm-icon">account_circle</i>
</button>
<button class="qtm-button qtm-xlarge">
  <i class="material-icons qtm-icon">account_circle</i>
</button>