πŸ““

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