Button

The Button component is a reusable and customizable UI element designed to trigger user actions. It supports multiple styles, sizes, and states, making it flexible for various use cases.

Props

Prop	Type	Default	Description
`label`	`string`	`''`	Text to display on the button.
`variant`	`string`	`'primary'`	Visual style of the button. Options: `primary`, `secondary`, `tertiary`, `link`, `business`, `upgrade` etc.
`disabled`	`boolean`	`false`	Disables interaction when true.
`width`	`string`	`auto`	Size of the button. Options: `auto`, `full`.

Example component with all props

html

<Button label="Button" variant="primary" size="sm" disabled></Button>

Variants

Primary

The primary button is used for the main action on a page or within a component. It draws the most attention and is usually styled with a prominent color.

html

<Button label="Primary Button" variant="primary"></Button>

Secondary

The secondary button is used for alternative actions that are less important than the primary action but still require visibility.

html

<Button label="Secondary Button" variant="secondary"></Button>

Tertiary

The tertiary button is used for minimal emphasis actions or where a subtle, less dominant button style is preferred.

html

<Button label="Tertiary Button" variant="tertiary"></Button>

Link

The link button is styled like a hyperlink and is used for navigational actions or less critical secondary interactions.

html

<Button label="Link Button" variant="link"></Button>

Disabled

The disabled button indicates an inactive or unavailable state. It cannot be clicked, focused, or interacted with.

html

<Button label="Primary Button" variant="primary" disabled></Button>
<Button label="Secondary Button" variant="secondary" disabled></Button>
<Button label="Tertiary Button" variant="tertiary" disabled></Button>

Business

The business button is used in the navigation bar to toggle between business and personal mode.

html

<Button label="Button CTA" variant="business">
  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 18.3333C14.6024 18.3333 18.3333 14.6024 18.3333 9.99999C18.3333 5.39762 14.6024 1.66666 10 1.66666C5.39763 1.66666 1.66667 5.39762 1.66667 9.99999C1.66667 14.6024 5.39763 18.3333 10 18.3333Z" stroke="#461901" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/></svg>
  <span>Button CTA</span>
  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 18.3333C14.6024 18.3333 18.3333 14.6024 18.3333 9.99999C18.3333 5.39762 14.6024 1.66666 10 1.66666C5.39763 1.66666 1.66667 5.39762 1.66667 9.99999C1.66667 14.6024 5.39763 18.3333 10 18.3333Z" stroke="#461901" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/></svg>
</Button>

Upgrade Button

The upgrade button is used in the exposures sidebar to begin an escalation.

html

<Button label="Button CTA" variant="upgrade">
  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 18.3333C14.6024 18.3333 18.3333 14.6024 18.3333 9.99999C18.3333 5.39762 14.6024 1.66666 10 1.66666C5.39763 1.66666 1.66667 5.39762 1.66667 9.99999C1.66667 14.6024 5.39763 18.3333 10 18.3333Z" stroke="#FAFAFA" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/></svg>
  <span>Button CTA</span>
  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 18.3333C14.6024 18.3333 18.3333 14.6024 18.3333 9.99999C18.3333 5.39762 14.6024 1.66666 10 1.66666C5.39763 1.66666 1.66667 5.39762 1.66667 9.99999C1.66667 14.6024 5.39763 18.3333 10 18.3333Z" stroke="#FAFAFA" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/></svg>
</Button>

Icon Only

Use an icon-only button when space is limited or when the icon itself clearly communicates the action.

html

<Button variant="primary">
  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 18.3333C14.6024 18.3333 18.3333 14.6024 18.3333 10C18.3333 5.39763 14.6024 1.66667 10 1.66667C5.39763 1.66667 1.66667 5.39763 1.66667 10C1.66667 14.6024 5.39763 18.3333 10 18.3333Z" stroke="#8EC5FF" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/></svg>
</Button>
<Button variant="secondary">
  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 18.3333C14.6024 18.3333 18.3333 14.6024 18.3333 9.99999C18.3333 5.39762 14.6024 1.66666 10 1.66666C5.39763 1.66666 1.66667 5.39762 1.66667 9.99999C1.66667 14.6024 5.39763 18.3333 10 18.3333Z" stroke="#9F9FA9" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/></svg>
</Button>
<Button variant="tertiary">
  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 18.3333C14.6024 18.3333 18.3333 14.6024 18.3333 9.99999C18.3333 5.39762 14.6024 1.66666 10 1.66666C5.39763 1.66666 1.66667 5.39762 1.66667 9.99999C1.66667 14.6024 5.39763 18.3333 10 18.3333Z" stroke="#9F9FA9" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/></svg>
</Button>

Button with icon

To create a button with an icon, wrap the icon and text in a button component.

Icon Before Text

Easily add an icon before the button text to provide better visual context and make actions more recognizable.

html

<Button variant="primary">
  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 18.3333C14.6024 18.3333 18.3333 14.6024 18.3333 10C18.3333 5.39763 14.6024 1.66667 10 1.66667C5.39763 1.66667 1.66667 5.39763 1.66667 10C1.66667 14.6024 5.39763 18.3333 10 18.3333Z" stroke="#8EC5FF" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/></svg>
  <span>Button CTA</span>
</Button>
<Button variant="secondary">
  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 18.3333C14.6024 18.3333 18.3333 14.6024 18.3333 9.99999C18.3333 5.39762 14.6024 1.66666 10 1.66666C5.39763 1.66666 1.66667 5.39762 1.66667 9.99999C1.66667 14.6024 5.39763 18.3333 10 18.3333Z" stroke="#9F9FA9" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/></svg>
  <span>Button CTA</span>
</Button>
<Button variant="tertiary">
  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 18.3333C14.6024 18.3333 18.3333 14.6024 18.3333 9.99999C18.3333 5.39762 14.6024 1.66666 10 1.66666C5.39763 1.66666 1.66667 5.39762 1.66667 9.99999C1.66667 14.6024 5.39763 18.3333 10 18.3333Z" stroke="#9F9FA9" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/></svg>
  <span>Button CTA</span>
</Button>

Icon After Text

Place an icon after the button text to indicate additional context, actions, or navigation hints.

html

<Button variant="primary">
  <span>Button CTA</span>
  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 18.3333C14.6024 18.3333 18.3333 14.6024 18.3333 10C18.3333 5.39763 14.6024 1.66667 10 1.66667C5.39763 1.66667 1.66667 5.39763 1.66667 10C1.66667 14.6024 5.39763 18.3333 10 18.3333Z" stroke="#8EC5FF" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/></svg>
</Button>
<Button variant="secondary">
  <span>Button CTA</span>
  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 18.3333C14.6024 18.3333 18.3333 14.6024 18.3333 9.99999C18.3333 5.39762 14.6024 1.66666 10 1.66666C5.39763 1.66666 1.66667 5.39762 1.66667 9.99999C1.66667 14.6024 5.39763 18.3333 10 18.3333Z" stroke="#9F9FA9" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/></svg>
</Button>
<Button variant="tertiary">
  <span>Button CTA</span>
  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 18.3333C14.6024 18.3333 18.3333 14.6024 18.3333 9.99999C18.3333 5.39762 14.6024 1.66666 10 1.66666C5.39763 1.66666 1.66667 5.39762 1.66667 9.99999C1.66667 14.6024 5.39763 18.3333 10 18.3333Z" stroke="#9F9FA9" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/></svg>
</Button>

Icon Before & After Text

Add icons on both sides of the button text to provide clear visual cues and enhance user interaction. This style is ideal when you want to emphasize the action using multiple icons.

html

<Button variant="primary">
  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 18.3333C14.6024 18.3333 18.3333 14.6024 18.3333 10C18.3333 5.39763 14.6024 1.66667 10 1.66667C5.39763 1.66667 1.66667 5.39763 1.66667 10C1.66667 14.6024 5.39763 18.3333 10 18.3333Z" stroke="#8EC5FF" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/></svg>
  <span>Button CTA</span>
  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 18.3333C14.6024 18.3333 18.3333 14.6024 18.3333 10C18.3333 5.39763 14.6024 1.66667 10 1.66667C5.39763 1.66667 1.66667 5.39763 1.66667 10C1.66667 14.6024 5.39763 18.3333 10 18.3333Z" stroke="#8EC5FF" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/></svg>
</Button>
<Button variant="secondary">
  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 18.3333C14.6024 18.3333 18.3333 14.6024 18.3333 9.99999C18.3333 5.39762 14.6024 1.66666 10 1.66666C5.39763 1.66666 1.66667 5.39762 1.66667 9.99999C1.66667 14.6024 5.39763 18.3333 10 18.3333Z" stroke="#9F9FA9" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/></svg>
  <span>Button CTA</span>
  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 18.3333C14.6024 18.3333 18.3333 14.6024 18.3333 9.99999C18.3333 5.39762 14.6024 1.66666 10 1.66666C5.39763 1.66666 1.66667 5.39762 1.66667 9.99999C1.66667 14.6024 5.39763 18.3333 10 18.3333Z" stroke="#9F9FA9" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/></svg>
</Button>
<Button variant="tertiary">
  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 18.3333C14.6024 18.3333 18.3333 14.6024 18.3333 9.99999C18.3333 5.39762 14.6024 1.66666 10 1.66666C5.39763 1.66666 1.66667 5.39762 1.66667 9.99999C1.66667 14.6024 5.39763 18.3333 10 18.3333Z" stroke="#9F9FA9" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/></svg>
  <span>Button CTA</span>
  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 18.3333C14.6024 18.3333 18.3333 14.6024 18.3333 9.99999C18.3333 5.39762 14.6024 1.66666 10 1.66666C5.39763 1.66666 1.66667 5.39762 1.66667 9.99999C1.66667 14.6024 5.39763 18.3333 10 18.3333Z" stroke="#9F9FA9" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/></svg>
</Button>

Processing Button

Use the processing button to indicate that an action is currently in progress. It usually includes a loading spinner or animation to provide visual feedback while the system completes the requested task.

html

<Button variant="primary">
  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path opacity="0.3" d="M19 10C19 11.1819 18.7672 12.3522 18.3149 13.4442C17.8626 14.5361 17.1997 15.5282 16.364 16.364C15.5282 17.1997 14.5361 17.8626 13.4441 18.3149C12.3522 18.7672 11.1819 19 10 19C8.8181 19 7.64778 18.7672 6.55585 18.3149C5.46392 17.8626 4.47176 17.1997 3.63604 16.364C2.80031 15.5282 2.13738 14.5361 1.68508 13.4441C1.23279 12.3522 1 11.1819 1 10C1 8.8181 1.23279 7.64778 1.68509 6.55585C2.13738 5.46392 2.80031 4.47176 3.63604 3.63604C4.47177 2.80031 5.46392 2.13737 6.55585 1.68508C7.64778 1.23279 8.81811 0.999999 10 1C11.1819 1 12.3522 1.23279 13.4442 1.68509C14.5361 2.13738 15.5282 2.80031 16.364 3.63604C17.1997 4.47177 17.8626 5.46392 18.3149 6.55585C18.7672 7.64778 19 8.81811 19 10L19 10Z" stroke="#8EC5FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M10 1C11.1819 1 12.3522 1.23279 13.4442 1.68508C14.5361 2.13738 15.5282 2.80031 16.364 3.63604C17.1997 4.47177 17.8626 5.46392 18.3149 6.55585C18.7672 7.64778 19 8.8181 19 10" stroke="#8EC5FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
  <span>Submitting...</span>
</Button>
<Button variant="secondary">
  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path opacity="0.3" d="M19 10C19 11.1819 18.7672 12.3522 18.3149 13.4442C17.8626 14.5361 17.1997 15.5282 16.364 16.364C15.5282 17.1997 14.5361 17.8626 13.4441 18.3149C12.3522 18.7672 11.1819 19 10 19C8.8181 19 7.64778 18.7672 6.55585 18.3149C5.46392 17.8626 4.47176 17.1997 3.63604 16.364C2.80031 15.5282 2.13738 14.5361 1.68508 13.4441C1.23279 12.3522 1 11.1819 1 10C1 8.8181 1.23279 7.64778 1.68509 6.55585C2.13738 5.46392 2.80031 4.47176 3.63604 3.63604C4.47177 2.80031 5.46392 2.13737 6.55585 1.68508C7.64778 1.23279 8.81811 0.999999 10 1C11.1819 1 12.3522 1.23279 13.4442 1.68509C14.5361 2.13738 15.5282 2.80031 16.364 3.63604C17.1997 4.47177 17.8626 5.46392 18.3149 6.55585C18.7672 7.64778 19 8.81811 19 10L19 10Z" stroke="#9F9FA9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M10 1C11.1819 1 12.3522 1.23279 13.4442 1.68508C14.5361 2.13738 15.5282 2.80031 16.364 3.63604C17.1997 4.47177 17.8626 5.46392 18.3149 6.55585C18.7672 7.64778 19 8.8181 19 10" stroke="#9F9FA9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
  <span>Submitting...</span>
</Button>
<Button variant="tertiary">
  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path opacity="0.3" d="M19 10C19 11.1819 18.7672 12.3522 18.3149 13.4442C17.8626 14.5361 17.1997 15.5282 16.364 16.364C15.5282 17.1997 14.5361 17.8626 13.4441 18.3149C12.3522 18.7672 11.1819 19 10 19C8.8181 19 7.64778 18.7672 6.55585 18.3149C5.46392 17.8626 4.47176 17.1997 3.63604 16.364C2.80031 15.5282 2.13738 14.5361 1.68508 13.4441C1.23279 12.3522 1 11.1819 1 10C1 8.8181 1.23279 7.64778 1.68509 6.55585C2.13738 5.46392 2.80031 4.47176 3.63604 3.63604C4.47177 2.80031 5.46392 2.13737 6.55585 1.68508C7.64778 1.23279 8.81811 0.999999 10 1C11.1819 1 12.3522 1.23279 13.4442 1.68509C14.5361 2.13738 15.5282 2.80031 16.364 3.63604C17.1997 4.47177 17.8626 5.46392 18.3149 6.55585C18.7672 7.64778 19 8.81811 19 10L19 10Z" stroke="#9F9FA9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M10 1C11.1819 1 12.3522 1.23279 13.4442 1.68508C14.5361 2.13738 15.5282 2.80031 16.364 3.63604C17.1997 4.47177 17.8626 5.46392 18.3149 6.55585C18.7672 7.64778 19 8.8181 19 10" stroke="#9F9FA9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
  <span>Submitting...</span>
</Button>

Size

sm

The small size is ideal for compact layouts and secondary actions where space is limited. Use it when you need a lighter, more subtle button style.

html

<Button label="Button CTA" variant="primary" size="sm"></Button>

md

The medium size is the default button size and works best for most use cases, providing a balanced look between visibility and space efficiency.

html

<Button label="Button CTA" variant="primary" size="md"></Button>

width

Auto

The auto size is the default size and is used for most buttons. Setting this property is not required.

html

<Button label="Auto Width Button" variant="primary" class="w-auto"></Button>

Full

The full size is used for full width buttons.

html

<Button label="Full Width Button" variant="primary" class="w-full"></Button>

Button ​

Props ​

Example component with all props ​

Variants ​

Primary ​

Secondary ​

Tertiary ​

Link ​

Disabled ​

Business ​

Upgrade Button ​

Icon Only ​

Button with icon ​

Icon Before Text ​

Icon After Text ​

Icon Before & After Text ​

Processing Button ​

Size ​

sm ​

md ​

width ​

Auto ​

Full ​

Button

Props

Example component with all props

Variants

Primary

Secondary

Tertiary

Link

Disabled

Business

Upgrade Button

Icon Only

Button with icon

Icon Before Text

Icon After Text

Icon Before & After Text

Processing Button

Size

sm

md

width

Auto

Full