Buttons#

Component#

semantic: brandcolor: greenProminance 4Prominance 3Prominance 2Prominance 1

semantic: actioncolor: blueProminance 4Prominance 3Prominance 2Prominance 1

semantic: criticalcolor: redProminance 4Prominance 3Prominance 2Prominance 1

semantic: specialcolor: purpleProminance 4Prominance 3Prominance 2Prominance 1

semantic: highlightcolor: yellowProminance 4Prominance 3Prominance 2Prominance 1

semantic: interactable-warmcolor: stoneProminance 4Prominance 3Prominance 2Prominance 1

semantic: interactablecolor: greyProminance 4Prominance 3Prominance 2Prominance 1

Properties

Disabled

disabled

Semantic

Surface

Small

small

Left Icon

Right Icon

Props

show props extended from libraries

name	type	default	description

Semantic#

Brandgreen

You have a straight-forward page with simple actions. You want to keep it simple and Tinka without any doubt.

Actionblue

You have various actions on a page. The product is mildy complex and you want to put focus on interactions.

Criticalred

You have an action that will lead to an irreversible result, or very inconvenient to undo. You want the user to think twice before they perform this action.

Specialpurple

You have an special feature that is not the primary thing to do in your product. The action stay at the same page or context. And it is easy to dismiss, or go back to the orignal context. (e.g. tooltip, decision tree)

Highlightyellow

Your product has various actions. You need to grab attention for reasons other than a call-to-action.

Interactablegrey

You want the interactable look of buttons, but don't want it to grab too much attention.

Interactable-warmstone

Same as Interactable, but in a warmer shade to go with warmer color scheme.

Loading State#

To apply loading state to the buttons, disable the button and apply the .loading utility class to the button element. Additionally, it is also a good idea to change the button label to reflect the state.