🖲

Buttons

Component

Features

Each visible item to be shown on this page.

Styles

Whether your button is fill, ghost, outline or just text

Shape

A consistent shape in padding, border and radius

Copy

Instructional text that details what will happen if you click the button

⭐️ Users should always have an idea where they will be going to, or what event will happen before clicking a button

⭐️ If your button has generic copy such as 'Okay' or 'Cancel', include a label above it describing the event or purpose of the button

Color

A secure, private code that allows access to their account

⭐️ Utilise your branding colors to establish what is primary and secondary actions

⭐️ Colors can indicate the mood of the button e.g. red button to delete which is bad, green button to approve which is good

States

The way a component can change based on interaction.

Default

Button has not been interacted with and is visible

Button

Hover

Mouse pointer is on top of button's container

Button

Active

Button has been clicked on by user

Button

Focused

Button has been selected to receive input

Button

Disabled

Button is unable to be pressed

Button

Visited

Button has been previously pressed, is typically optional to style

Button