📓

Button

Meet Castos Sign In 14-Day Free Trial

Who we are

📓What we stand for️📓Our Purpose📓Our Vision📓Our Mission📓Our Values

Design System

📓Design Principles📓Colors📓Typography📓Images

Content Guide

📓What is a Content Guide📓Writing goals and principles📓Tips for writing at Castos

Component Library

📓About our Components📓Button

Logos & Assets

📓Castos📓Castos Productions📓Castos Academy📓Audience Podcast📓3 Clips Podcast
⚡
Meet Castos →

© Castos 2022 – v0.4

Button

💡
Buttons are used throughout the UI for actions, such as “Add”, “Close”, “Cancel”, or “Save”.

Types of Buttons

image

We have 3 types of buttons, for:

  1. Solid → The button contains a fill color.
  2. Outlined → The button has no fill, but is outlined to denote it's boundaries.
  3. Ghost → The button has no fill or outline, and appears to be text only.

Variations

There are 4 variations of buttons in Tempo. Each demanding a different level of attention, and should be used with that in mind. A primary action on a page (e.g. Save) should get the primary button, while a secondary action (e.g. Cancel) should get the secondary treatment. As well as some other variations depending on the need.

We need to combine the type of button with a variation to get the full button component.

Below is a further explanation on the types of buttons and how to use them:

1. Primary

The primary button uses, the purple color palette.

<p class="btn-solid btn-primary">Solid Primary Button</p>
<p class="btn-outlined btn-primary">Outlined Primary Button</p>

2. Secondary

The secondary button uses the light gray color palette, and is designed to use in close proximity of the primary button when more than one action is possible. 

<p class="btn-solid btn-secondary">Solid Secondary Button</p>
<p class="btn-outlined btn-secondary">Outlined Secondary Button</p>

3. Red

With red begin a CI color that can be used as an accent/complimentary CTA - it could be used sparingly... and in interfaces where danger actions (e.g. Delete) is possible, the red button could be used as a warning to the action about to take place. 

<p class="btn-solid btn-red">Solid Red Button</p>
<p class="btn-outlined btn-red">Outlined Red Button</p>

4. Dark

The dark button is intended as a neutral alternative to the secondary button.

<p class="btn-solid btn-dark">Solid Dark Button</p>
<p class="btn-outlined btn-dark">Outlined Dark Button</p>
  • Button
  • Types of Buttons
  • Variations
  • 1. Primary
  • 2. Secondary
  • 3. Red
  • 4. Dark