Buttons (Text)

Text buttons are used actions that are of lesser importance
while maintaining emphasis on the content found typically in cards

Variants

Variant	Usage
Icon on right	Primarily used to navigate users to an intended action i.e. to guide users to Account Details dashboard; often used in conjunction with a primary button i.e. the secondary button is for “Back”, and the text button is for “Cancel”.
Icon on Left	Used to emphasise an action with a visual cue; often used standalone i.e. filter
Icon on Left & Right	Used to emphasise an action with an icon and an navigation arrow; often used standalone
No Icon	Used for straightforward call-to-actions i.e. See All; often used in conjunction with a primary button i.e. the secondary button is for “Back”, and the text button is for “Cancel”.
Disabled	Not available for use due to insufficient information or other business rules

All text button types share the same anatomy and are made up of the following: 

Text buttons have a variable width dependent on the length of text. Accompanying icons are always nested in a 16px by 16px frame.

Text buttons have a text size of 14px, and uses Sentence case. Use “Body (Emphasis)” text style on Figma.

Choose to stack text buttons (with right or no icon) as a standalone call-to-action

Do not stack two text buttons