Button

stablev1.0.0

Full Button Elements kit from Figma SCDC node 13:705: Primary, Secondary, Back, Scroll, Selection, and Login.

Open in Figma

Live preview

Primary · Secondary

Selection · Back

Scroll

Scroll the terms. The button fills from the left like a health bar, then becomes “I understand & accept” at 100%.

Scroll this page. The button below fills from the left as you go, like a health bar.

Standard Chartered may use these terms to confirm you have read the disclosure before continuing. Keep scrolling until the fill reaches the end of the button.

The control stays disabled while any unread content remains. That prevents accepting from the top of a long legal page.

When the tracked container is fully scrolled, the label changes to “I understand & accept” and the button becomes clickable.

Product screens can pass a specific scroll target, or omit it and let the button follow the nearest page or drawer.

Continue to the bottom to complete the fill.

Login

Implementation

import { Button } from '@nitro-core/ui';

<Button>
  Button
</Button>

Design → Code

Property names stay aligned so a Figma Button maps onto the production import below.

Figma

Button Elements

13:756

Type: Primary
Placement: Light
State: false
text: Button

Code

Button

@nitro-core/ui

variant: "primary"
placement: "light"
disabled: {false}
children: {children}

Token inspector

Background

Figma Variable

core/brand/blue #0473ea

Nitro Token

color.action.primary

CSS

--nitro-color-action-primary

Chain

Figma → Token → CSS → Component

Hover

Figma Variable

#aef1ea

Nitro Token

color.action.primaryHover

CSS

--nitro-color-action-primary-hover

Chain

Figma → Token → CSS → Component

Text

Figma Variable

core/grey/white

Nitro Token

color.text.onPrimary

CSS

--nitro-color-text-on-primary

Chain

Figma → Token → CSS → Component

Width

Figma Variable

295px

Nitro Token

size.button

CSS

--nitro-size-button

Chain

Figma → Token → CSS → Component

Height

Figma Variable

52px

Nitro Token

size.buttonHeight

CSS

--nitro-size-button-height

Chain

Figma → Token → CSS → Component

Radius

Figma Variable

24px 0 43px 24px

Nitro Token

radius.button

CSS

--nitro-radius-button

Chain

Figma → Token → CSS → Component

Padding X

Figma Variable

24px

Nitro Token

spacing.buttonX

CSS

--nitro-space-button-x

Chain

Figma → Token → CSS → Component

Padding Y

Figma Variable

16px

Nitro Token

spacing.buttonY

CSS

--nitro-space-button-y

Chain

Figma → Token → CSS → Component

Typography

Figma Variable

SC Prosper Sans Bold 18 / 20

Nitro Token

typography.size.400

CSS

--nitro-typography-size-400

Chain

Figma → Token → CSS → Component