Buttons

Buttons communicate the action that will occur once the user touches them.

Seenit buttons are based on the Material buttons. On press, waves animation is triggered, the background colour changes and, for raised buttons, have a more prominent drop shadow.

To add the waves animation, include the classes waves-effect waves-dark to your button.

Button types

There are four main button types: link; flat button; raisd button; and floating action button (Android only).

Link

Link

Used to link to external sites and pages in the site within a block of copy. Also used for nav elements.

  • Font-size: 14pt;
  • Color: color ("teal", "base");

Flat button

Flat button

Can be used for inline buttons. Used for dialogs and secondary actions. In a modal, a flat button can be base teal and primary body in color (e.g. Save (base teal) and close (primary body). Don’t use flat buttons in UIs where they would be difficult to see.

  • Font-size: 14pt;
  • Color: color ("teal", "base");
  • Text-transform: uppercase;

Rasied button

Rasied button

Used for primary actions (e.g. go to projects, create a project, go live etc.). Be careful to not overuse raised buttons. Raised buttons stand out more than flat buttons so should be used to give more prominence to actions in layouts with a lot of varying content.

  • Font-size: 14pt;
  • Color: $white;
  • Background: color ("teal", "base");
  • Text-transform: uppercase;
  • Border-radius: 2pt;

FAB button (Android only)

FAB

Used to for actions that need to be persistent and readily available. Only used for Android products.

  • Font-size: 14pt;
  • Color: $white;
  • Background: color ("teal", "base");
  • Text-transform: uppercase;

Variations

Inverse buttons

Inverse Flat inverse

Used when there is not enough contrast with a standard button, e.g. on top of an image or dark background.

  • Font-size: 14pt;

Secondary buttons

Close Cancel

Used to indicate a secondary action (e.g. close, cancel) and should always be used alongside a primary button.

  • Font-size: 14pt;

Warning button

Warn

Used to indicate a destructive action (e.g. delete). Should always be raised to provide sufficient emphasis and contrast.

  • Font-size: 14pt;
  • Color: $white;
  • Background: color("red","base");

Disabled button

DISABLED

Used to indicate the action is currently disabled.

  • Font-size: 14pt;
  • Background: $grey-light;
  • Color: $grey-dark;