Buttons! Click these, and actions happen. Sometimes, they take you to other pages.
Basic
The base button—from here, we add classes to change its appearance, and the behaviour associated with clicking it. This pattern is rarely used as-is.
Toggle pattern display widthFlat
A base flat style button with the button--flat
class, we add classes to change its appearance and the behaviour associated with clicking it. This pattern is rarely used as-is.
Help
A small button button--help
class, usually attached to an element, that provides additional help to the user.
Raised
A raised button, this has some visual depth to it. However, it’s almost always combined with a colour style to provide an associated severity to the action.
Toggle pattern display widthRaised (positive)
A raised button with the button--positive
class, adding a colour associated with positive actions to the button.
Raised (negative)
A raised button with the button--negative
class, adding a colour associated with negative actions to the button.
Raised (neutral)
A raised button with the button--neutral
class, adding a colour associated with neutral actions to the button.