Buttons

Components

Last updated: April 2017

We have a default set of buttons and a variety of ways in which they can be used. Documented here are the rules that define those actions along with when and how they should be used.

It’s important we don’t overuse buttons across the application. Always question whether it’s required or if simply using links with iconography is more appropriate. This ensures we can aim focus where it’s required.

A good guiding rule is if the action doesn’t perform a navigational action it should likely be a link. This is flexible based on the requirements of the action and its importance.

Color theory

Color reference

Primary

The Primary button highlights the strongest action within the interface or a component. For example the ‘Enter contest’ button when drafting or submission button on a form.

    Secondary

    Secondary buttons are used for actions where a primary button is not appropriate, when a number of buttons have the same priority but none of them are more important than the others. For example in lineup management where ‘Edit lineup’ and ‘Enter more contests’ have a similar priority level.

      Tertiary

      The Tertiary button is a low prominence option. Often used alongside a Primary or as a standalone button with the ability to read more information.

        Destructive

        The Destructive button is used when an action results in the removal of an item, or can result in a potentially serious negative consequence. For example using a remove from a lineup, and on the more serious side cancelling an entry.

          Naked

          Naked buttons have the same spacing and alignment rules as other buttons, however they visually look like normal links. This allows them to be used alongside buttons when a low priority action is required, the element is placed alongside buttons, or when a tap target area should be considered.

            Specs

            Sizing

            Button sizing on web relies primarily on font sizes used within the button itself to dictate the overall dimensions. For anything beyond font sizing alone we provide two sizes which adjust the internal padding of the buttons themselves. These are regular and small, which can we seen with various font sizes below.

              Corners

                Grouping

                Grouped buttons are often used when related actions are required. For example switching between All/My entries on the leaderboard or player position in draft.

                Do

                Use grouped buttons from the same family

                Don't

                Mix button families