Button

Buttons are clickable elements that are used to perform an action.

Usage

Use a button when the user can perform an action without navigating to a new page.
Use a primary button to indicate the main action of a group button set.
Use action verbs or phrases to tell the user what will happen next.

Do not use buttons as navigational elements. Instead, use links when the desired action is to take the user to a new page (with the exception of the back and forward buttons).
Do not style Buttons as links
Do not use leading and trailing icons at the same time.
Don’t use long labels

	Item	Component type	Content type	Notes
1	Leading icon	Icon	SVG file	OPTIONAL
2	Button label	Typography	Text	MANDATORY
3	Trailing icon (not shown)	Icon	SVG file	OPTIONAL

Buttons come with two sizes: large and small.

Buttons have five states that define their appearance: Default, Hover, Focus, Active and Disabled.

Name	Control	Description
`variant`	`primary` `secondary` `primary-icon` `secondary-icon`	The variant to use.
`size`	`small` `large`	The size of the component.
`disabled`	`False` `True`	If `true`, the component is disabled.
`children`		The content of the component.
`iconPrefix`	`iconPrefix : {` `props : {` `icon : "alert"` `}` `}`	Element placed before the children.
`iconSuffix`	`iconSuffix : {` `props : {` `icon : "arrowDown"` `}` `}`	Element placed after the children.
`aria-label`
`className`	`Set string`
`onClick`	`-`

Button labels should use standard case.
Button labels should be as short as possible, while clearly explaining the action the button triggers.
For maximum legibility, a text label should remain on a single line.
Swap phrases like “Read more“, “Learn more“, and “Click here“ for more specific action oriented phrases.

tbd

tbd