Who we are
Logos & Assets
© Castos 2022 – v0.4
Types of Buttons
We have 3 types of buttons, for:
- Solid → The button contains a fill color.
- Outlined → The button has no fill, but is outlined to denote it's boundaries.
- Ghost → The button has no fill or outline, and appears to be text only.
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:
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>
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>
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>
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>