Design styleguide: links and buttons
Default links use a combination of the teal colours spectrum. They can include icons, but to keep the link+icon balanced, text and the icon font have different font sizes.
- Regular link, 14px
- Icon, 11px
| State | Colour |
|---|---|
| Default | $teal |
| Hover | $orient |
| Active | $dark-blue |
Buttons can come in different colors, styles, sizes and might include icons. Depending on the context of the page or the section of a page, different styles should be applied. A baseline for size is:
- relaxed (height 40px)
- regular (height 32px)
- condensed (height 26px)
This should give enough size options for buttons to be used by themselves (for example page empty states - relaxed), near fields (for example a search component - regular) or embedded in smaller containers (for example inside a table row - delete product).
The primary button uses Teal/Allports background and white labels/icons. It should be ideally only used for the main action on a page or in a flow. A basic example is for when in a page you can create a new item (New product, New order cycle, New Order, New Enterprise). It can include an icon on the left side, but it's not necessary. The icon is coming from FontAwesome, and size follows the label.
| State | Style | Example |
|---|---|---|
| Default | White on Allports, left and right padding 12px, spacing between icon and label 8px, font and icon size 14px |  |
| Hover | White on Orient, 14px |  |
| Active | White on Orient,1px inner border Sherpa Blue, 14px |  |
| Focus | Default browser | TBD |
| Disabled | TBD | TBD |
The secondary button uses a white background and Orient for labels and icons. It should be for prominent actions that are not the primary purpose of the page. See an example used for search in the product list page.
It can also be used as a secondary option when combined with a primary button. See an example for empty state in product list.
It can include an icon on the left side, but it's not necessary. The icon is coming from FontAwesome, and size follows the label.
| State | Style | Example |
|---|---|---|
| Default | Orient on White, 1px inner border Orient, left and right padding 12px, spacing between icon and label 8px, font and icon size 14px |  |
| Hover | Orient on Mystic, 1px inner border Orient, 14px |  |
| Active | Sherpa Blue on Mystic, 1px inner border Sherpa Blue |  |
| Focus | Default browser | TBD |
| Disabled | TBD | TBD |
Disruptive buttons should only be used for deleting entities or canceling an action. Secondary disruptive buttons should be used within a page, when they are not the primary action and/or when we don't want to draw too much attention to the button itself.
| State | Style | Example |
|---|---|---|
| Default | Mojo on White, 1px inner border Mojo, left and right padding 12px, spacing between icon and label 8px, font and icon size 14px |  |
| Hover | White on Fair Pink, 1px inner border Mojo, 14px |  |
| Active | White on Roof Terracotta, 1px inner border Roof Terracotta, 14px |  |
| Focus | Default browser | TBD |
| Disabled | TBD | TBD |