Text Button

Buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. Button labels express what action will occur when the user interacts with it.

Each button variant has a particular function and its design signals that function to the user. It is therefore very important that the different variants are implemented consistently across products, so that they message the correct actions.

Since 8Bit Loot emphasizes heavily on stylization of pixels, we will not be using the industry standard of prioritization (primary -> secondary -> tertiary -> ghost).

The standard call-to-action button are used for most actions.

The emphasis call-to-action button should only be used for actions that are extremely important or essential. Since this button stands out visually and has a strong emphasis, there should only be one primary CTA button per section.

For actions that could have destructive effects on the user's data (for example, delete or remove).

The disabled button shows to users that an action exists, but is not possible for whatever reason. This button should be used for layout continuity or to show that an action may become available later under the right circumstances.

Disabled button always has  aria-disabled="true"  for attribute

Buttons show actions that users can take. They are typically placed throughout your UI in places like:

• Page
• Dialogs
• Modals
• Forms
• Cards
• Toolbars

Default

Label = $global-action-content-primary-color-default
Icon = $global-action-content-primary-color-default
BG = $global-action-surface-primary-color-default
Border = $global-action-border-primary-color-default
Focus = $global-action-border-color-focus

Hover

Label = $global-action-content-primary-color-hover
Icon = $global-action-surface-primary-color-hover
BG = $global-action-surface-primary-color-hover
Border = $global-action-surface-primary-color-hover
Focus = null

Default

Label = $global-action-content-inverse-color-default
Icon = $global-action-content-inverse-color-default
BG = $global-action-surface-inverse-color-default
Border = $global-action-border-primary-color-default
Focus = $global-action-border-color-focus

Hover

Label = $global-action-content-inverse-color-hover
Icon = $global-action-surface-inverse-color-hover
BG = $global-action-surface-inverse-color-hover
Border = $global-action-surface-primary-color-hover
Focus = null

Default

Label = $global-action-content-error-color-default
Icon = $global-action-content-error-color-default
BG = $global-action-surface-error-color-default
Border = $global-action-border-error-color-default
Focus = $global-action-border-color-focus

Hover

Label = $global-action-content-error-color-hover
Icon = $global-action-surface-error-color-hover
BG = $global-action-surface-error-color-hover
Border = $global-action-surface-error-color-hover
Focus = null

Default

Label = $global-action-content-color-disabled
Icon = $global-action-content-color-disabled
BG = $global-action-surface-color-disabled
Border = $global-action-border-color-disabled
Focus = null

Hover = null