Button

Buttons are action items that can initiate a certain action or change state, they can have customisable background, icons and text. Buttons should be easy to discover and clearly indicate the intended action.

Nude Button

Usage
Anatomy
Specs

Nude buttons contain important actions but they are emphasised lower than the primary buttons to make them less distractive. They are used for both important and secondary actions. They are used in cases where the content of the page requires more prominence than the action itself.

usage example image

States

example state image

Active

example state image

Disabled

example state image

Loading

example state image

Pressed

Edge Cases

example edge case image

Should not be used in vertical alignment

example edge case image

No more than 2 buttons to be used in a row

example edge case image

No multiline labels (Max 2-3 words)

Ghost Button

Usage
Anatomy
Specs

Ghost buttons are the more emphasised version of the nude button because of the stroke around them. They are used for secondary actions. They are used in cases where the action is not the primary focus of the screen. Mostly used in groups with other Ghost or Filled Buttons.

usage example image

States

example state image

Active

example state image

Disabled

example state image

Loading

example state image

Pressed

Edge Cases

example edge case image

Do not use more than 2 buttons in a row

Filled Button

Usage
Anatomy
Specs

Filled buttons have the highest emphasis as they have a color fill, they are used for the most compulsory actions and do a good job at grabbing attention. They are used for primary or high emphasis actions. They are used in cases when you want to draw users attention to the action. Can also be used along with other filled buttons or ghost buttons.

usage example image

States

example state image

Active

example state image

Disabled

example state image

Loading

example state image

Pressed

Edge Cases

example edge case image

Do not use more than 2 buttons in a row

example edge case image

Can be used along with ghost buttons, but not with nude buttons

Contextual Button

Usage
Anatomy
Specs

Contextual buttons are used when more data or context about the action need to be provided. They can be complemented with customisable backgrounds, type and icons depending on the requirement. They are usually used for navigation on color, image or map backgrounds for navbar, and inline cell actions where space constraint. This kind of buttons are mostly used where the icon is sufficient to describe the action.

usage example image

States

example state image

Detailed-Active

example state image

Detailed-Pressed

example state image

Social-Active

example state image

Social-Pressed

example state image

Social-Disabled

example state image

Social-Loading

Circular Button

Usage
Anatomy
Specs

Circular buttons are used standalone without any text complimenting them, they are used for all optional functions in a layout but they can be used in navigation and main functions as well depending on the layout. They will always have a container. Usually used for navigation on color,image or map backgrounds for navbar, and inline cell actions where space constraint. This kind of buttons are mostly used where the icon is sufficient to describe the action.

usage example image

States

example state image

Active

example state image

Disabled

example state image

Pressed

Image Button

Usage
Anatomy

Image buttons are standalone icons used where space is constraint and the icon itself is sufficient to describe the action. They can be used in navigation or inline without label

usage example image