Actions

These are components where a user might be tempted or prompted to take an action. Think of a button, or a link; when someone might want to submit a form or even learn more.

Link

The most basic of all actions is a link. Links appear inline in text and allow users to jump from page to page. This is a link. It is blue in color, and when hovered over, it is underlined. Link colors can be overriden by using any of the colors in the colors section here. Links can also be bold italicized or even both.

Button

A button is a type of action that pulls the users attention to do something more. Buttons should be used sparingly as an excess of them will cause visual confusion with your users. Use buttons to really pull the user's attention to what you need them to click on or do most.

This the the most basic of all buttons with default styling.

In addition, buttons have 2 variants:

  1. fill This creates a background color.
  2. outline This only creates a border

The buttons support by default the following colors:

blue

purple

yellow

white

green

Button Groups

Buttons can be combined in button groups. This places the correct amount of gaps between the buttons.

Preview Mode - Content Is Not Live
guid: 0e77e56d-u
env: production