# Atomic Elements

# Button

# Introduction

The CpButton directly maps to a button.

The CpButton component is the most common button component. It contains a label and optional icons before or after the label.

  <cp-button>Default button</cp-button>

# All variations




  <div class="buttonVariationExample">
    <div class="buttonVariationExample__type">
      <cp-heading heading-level="h3" class="buttonVariationExample__title">Default</cp-heading>
      <div class="buttonVariationExample__buttons">
        <cp-button>Default button</cp-button>
        <cp-button color="blue">Default button</cp-button>
        <cp-button color="purple">Default button</cp-button>
        <cp-button color="green">Default button</cp-button>
        <cp-button color="orange">Default button</cp-button>
        <cp-button color="red">Default button</cp-button>
    <div class="buttonVariationExample__type">
      <cp-heading heading-level="h3" class="buttonVariationExample__title">Primary</cp-heading>
      <div class="buttonVariationExample__buttons">
        <cp-button appearance="primary" color="blue">Primary button</cp-button>
        <cp-button appearance="primary" color="purple">Primary button</cp-button>
        <cp-button appearance="primary" color="green">Primary button</cp-button>
        <cp-button appearance="primary" color="orange">Primary button</cp-button>
        <cp-button appearance="primary" color="red">Primary button</cp-button>
    <div class="buttonVariationExample__type">
      <cp-heading heading-level="h3" class="buttonVariationExample__title">Minimal</cp-heading>
      <div class="buttonVariationExample__buttons">
        <cp-button appearance="minimal" color="blue">Minimal button</cp-button>
        <cp-button appearance="minimal" color="purple">Minimal button</cp-button>
        <cp-button appearance="minimal" color="green">Minimal button</cp-button>
        <cp-button appearance="minimal" color="orange">Minimal button</cp-button>
        <cp-button appearance="minimal" color="red">Minimal button</cp-button>

<style lang="scss">
.buttonVariationExample {
  &__title {
    margin-bottom: 16px;

  &__buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    > * {
      margin: 0 16px 16px 0;

# Appearance

The CpButton component has an appearance property with 3 available values:

  • default — this is the default (nothing specified).
  • primary
  • minimal
  <cp-button>Default button</cp-button>
  <cp-button appearance="primary" color="blue">Primary button</cp-button>
  <cp-button appearance="minimal" color="blue">Minimal button</cp-button>

# Colors

In addition to the appearance property, a CpButton can also have a color property with following options:

  • default color (nothing specified)
  • blue
  • purple
  • green
  • orange
  • red
<cp-button>Default button</cp-button>
<cp-button color='blue'>Blue button</cp-button>
<cp-button color='purple'>Purple button</cp-button>
<cp-button color='green'>Green button</cp-button>
<cp-button color='orange'>Orange button</cp-button>
<cp-button color='red'>Red button</cp-button>

# Mixing appearance and colors

The color property works with any appearance.

# Primary with color

<cp-button appearance="primary" color="blue">Blue button</cp-button>
<cp-button appearance="primary" color="purple">Purple button</cp-button>
<cp-button appearance="primary" color='green'>Green button</cp-button>
<cp-button appearance="primary" color='orange'>Orange button</cp-button>
<cp-button appearance="primary" color='red'>Red button</cp-button>

# Minimal with color

<cp-button appearance="minimal" color="blue">Blue button</cp-button>
<cp-button appearance="minimal" color="purple">Purple button</cp-button>
<cp-button appearance="minimal" color='green'>Green button</cp-button>
<cp-button appearance="minimal" color='orange'>Orange button</cp-button>
<cp-button appearance="minimal" color='red'>Red button</cp-button>

# Size

You can set the size of the CpButton using font-size directly on the component

<cp-button style="font-size: 12px;">12px font-sized</cp-button>
<cp-button style="font-size: 14px;">14px font-sized</cp-button>
<cp-button>16px font-sized (default)</cp-button>
<cp-button style="font-size: 18px;">18px font-sized</cp-button>

# Large variation

You can have a specific large variation for the CpButton using is-large property.

<cp-button is-large>Large button</cp-button>

# Square variation

You can have a square CpButton using is-square property:

<cp-button is-square>Squared button</cp-button>

# Loading state

You can display the loading variation of the CpButton using is-loading property:


It also works well with icons

When the button is loading, it is also disabled.

<cp-button is-loading>Click to display the loading state</cp-button>

# Buttons with an Icon

Buttons support an icon on either before or after the label using 2 slots:

  • icon-before
  • icon-after

If you want to display an icon-button, you can use the slot only.


Avoid using two icons in a button.

You can add an icon from Vue feather icons for example.

  <div class="buttonWithIcon">
    <cp-button appearance="minimal" color="blue">
      <check-icon slot="icon-before" />
      Button with icon before
    <cp-button appearance="minimal" color="green">
      <check-icon slot="icon-after" />
      Button with icon after
    <cp-button appearance="minimal" color="orange">
      <check-icon slot="icon-after" />

import { CheckIcon } from 'vue-feather-icons'

export default {
  components: {
<style lang="scss">
.buttonWithIcon {
  display: flex;

  button {
    margin-right: 16px;

# CpButton Props

# :appearance 'default' | 'primary' | 'minimal'

The main appearance of the button.

# :color ' ', 'blue' | 'purple' | 'green' | 'orange' | 'red''

The color of the button. It determines either its background color on the font color, according to the button appearance props.

# :disabled bool = false

When true, the button is disabled. is-loading also sets the button to disabled.

# :tag 'button' | 'a' | 'input'

Maps directly to the button's tag.

# :type 'button' | 'submit' | 'reset'

Maps directly to the button's type property.

# :is-loading bool = false

When true, show a loading spinner. This also disables the button.

# :is-square bool = false

Makes the button squared.

# :is-large bool = false

Make the button bigger with specific style properties.

# icon-before slot

Sets an icon before the text. Can be any icon from vue-feather-icon or a custom element.

# icon-after slot

Sets an icon after the text. Can be any icon from vue-feather-icon or a custom element.

# Badge

# Introduction

The CpBadge component is label with a background color.

It's used for state and text with a slightly rounded corners.

The CpBadge component should only be used for state and general text labels.

# Color options

# Subtle badges

<cp-badge label="beta" color="neutral" />
<cp-badge label="seen" color="blue" />
<cp-badge label="processed" color="green" />
<cp-badge label="canceled" color="red" />
<cp-badge label="pending" color="orange" />
<cp-badge label="new" color="purple" />
<cp-badge label="teal" color="teal" />
<cp-badge label="pink" color="pink" />
<cp-badge label="yellow" color="yellow" />

# Solid badges

<cp-badge label="neutral" color="neutral" is-solid />
<cp-badge label="approved" color="green" is-solid />
<cp-badge label="failed" color="red" is-solid />
<cp-badge label="waiting" color="orange" is-solid />
<cp-badge label="help" color="purple" is-solid />
<cp-badge label="teal" color="teal" is-solid />
<cp-badge label="pink" color="pink" is-solid />
<cp-badge label="yellow" color="yellow" is-solid />

# Plain badges

<cp-badge label="neutral" color="neutral" is-plain is-solid />
<cp-badge label="green" color="green" is-plain is-solid />
<cp-badge label="red" color="red" is-plain is-solid />
<cp-badge label="orange" color="orange" is-plain is-solid />
<cp-badge label="purple" color="purple" is-plain />
<cp-badge label="teal" color="teal" is-plain />
<cp-badge label="pink" color="pink" is-plain />
<cp-badge label="yellow" color="yellow" is-plain />

# CpBadge Props

# :color string

The color used for the badge.

# :label string | number

The label of the badge; it's capitalized by default.

# :is-solid bool = false

When true, the appearance of the badge changes to solid

# :is-plain bool = false

When true, the badge's dot is removed.