Button

Buttons are basic interface elements that initialize an action or function when the user interacts with them. The appearance of the button should suggest the user takes an action that leads to different scenarios. These elements that reinforce to the user the necessity to interact are called CTA (Call to Action) components, which basically are designed to capture user attention and improve the user experience within the application.

States

The states are the different behaviors of the button component based on the interaction of the user. For the desktop version, we contemplate five different states by which can pass.

States: enabled, hover, focus, active and disabled.

Anatomy

1.
Container
2.
Icon
3.
Label

Design tokens

General

Spacing

Component token	Element	Core token	Value
`paddingLeft`	Container	`spacing-03`	0.5rem / 8px
`paddingRight`	Container	`spacing-03`	0.5rem / 8px
`paddingTop`	Container	`spacing-03`	0.5rem / 8px
`paddingBottom`	Container	`spacing-03`	0.5rem / 8px

Size

The component width can adopt the following values:

Width	Value
`small`	60px
`medium`	240px
`large`	480px
`fillParent`	-
`fitContent`	-

The component height is fixed:

Height	Value
`min-height`	40px

Margin

Margin	Value
`xxsmall`	6px
`xsmall`	16px
`small`	24px
`medium`	36px
`large`	48px
`xlarge`	64px
`xxlarge`	100px

These values can be applied independently to each side of the component: top, bottom, left,right.

Typography

Component token	Property	Core token	Value
`labelFontLineHeight`	line-height	`font-leading-normal`	1.5 em
`labelLetterSpacing`	letter-spacing	`font-spacing-wide-01`	0.025 em

Primary

Color

Component token	Element	Core token	Value
`primaryBackgroundColor`	Button container	`color-purple-700`	#5f249f
`primaryFontColor`	Label	`color-white`	#ffffff
`primaryHoverBackgroundColor`	Container fill:hover	`color-purple-800`	#4b1c7d
`primaryActiveBackgroundColor`	Container fill:active	`color-purple-900`	#321353
`primaryDisabledBackgroundColor`	Container fill:disabled	`color-grey-100`	#f2f2f2
`primaryDisabledFontColor`	Label:disabled	`color-grey-500`	#999999
`primaryFocusBorderColor`	Container border:focus	`color-blue-600`	#0095ff

Border

Component token	Element	Core token	Value
`primaryBorderThickness`	Container	`border-width-0`	0
`primaryBorderStyle`	Container	`border-style-none`	none
`primaryBorderRadius`	Container	`border-radius-medium`	0.25rem / 4px

Typography

Component token	Element	Core token	Value
`primaryFontFamily`	Label	`font-family-sans`	'Open Sans', sans-serif
`primaryFontSize`	Label	`font-scale-03`	1 rem / 16px
`primaryFontWeight`	Label	`font-regular`	400

Secondary

Color

Component token	Element	Core token	Value
`secondaryBackgroundColor`	Container fill	`color-transparent`	transparent
`secondaryFontColor`	Label	`color-purple-700`	#5f249f
`secondaryBorderColor`	Container border	`color-purple-700`	#5f249f
`secondaryHoverBackgroundColor`	Container fill:hover	`color-purple-700`	#5f249f
`secondaryHoverFontColor`	Label:hover	`color-white`	#ffffff
`secondaryActiveBackgroundColor`	Container fill:active	`color-purple-900`	#321353
`secondaryDisabledBackgroundColor`	Container fill:disabled	`color-transparent`	transparent
`secondaryDisabledFontColor`	Label:disabled	`color-grey-500`	#999999
`secondaryFocusBorderColor`	Container border:focus	`color-blue-600`	#0095ff
`secondaryDisabledBorderColor`	Container border:disabled	`color-grey-500`	#999999

Border

Component token	Element	Core token	Value
`secondaryBorderThickness`	Container	`border-width-1`	1px
`secondaryBorderStyle`	Container	`border-style-solid`	solid
`secondaryBorderRadius`	Container	`border-radius-medium`	0.25rem / 4px

Typography

Component token	Element	Core token	Value
`secondaryFontFamily`	Label	`font-family-sans`	'Open Sans', sans-serif
`secondaryFontSize`	Label	`font-scale-03`	16px / 1 rem
`secondaryFontWeight`	Label	`font-regular`	400

Text

Color

Component token	Element	Core token	Value
`textBackgroundColor`	Container fill	`color-transparent`	transparent
`textFontColor`	Label	`color-purple-700`	#5f249f
`textHoverBackgroundColor`	Container fill:hover	`color-purple-100`	#f2eafa
`textActiveBackgroundColor`	Container fill:active	`color-purple-200`	#e5d5f6
`textDisabledBackgroundColor`	Container fill:disabled	`color-transparent`	transparent
`textDisabledFontColor`	Label:disabled	`color-grey-500`	#999999
`textFocusBorderColor`	Container border:focus	`color-blue-600`	#0095ff

Border

Component token	Element	Core token	Value
`textBorderThickness`	Container	`border-width-0`	0
`textBorderStyle`	Container	`border-style-none`	none
`textBorderRadius`	Container	`border-radius-medium`	0.25rem / 4px