Skip to content
Figma base components

Buttons

The main way people act on a screen. Six variants, five sizes and every state, built on the same tokens in Figma and React.

Free6 variants5 sizes5 statesReact
Gridnivo — Base
LAYERS
Button / Primary / md
Container
TLabel
ASSETS
Button
Button group
Button / Primary / mdBuy nowHug × 46
100%
DesignPrototype
ButtonInstance
VariantPrimary
Sizemd
StateDefault
ThemeLight
Auto layout
WHugH46
↔22↕0
R10Gap8
Fillink-950 #0A0A0A
VARIANT
SIZE
STATE
VARIANTS

Six variants, five sizes

Pick the variant by how important the action is. Sizes share one scale with inputs, so a button and a field always line up.

VARIANTxs 32 · sm 38 · md 46 · lg 52 · xl 60
Primaryvariant=primary
ButtonButtonButtonButtonButton
Secondaryvariant=secondary
ButtonButtonButtonButtonButton
Outlinevariant=outline
ButtonButtonButtonButtonButton
Accentvariant=accent
ButtonButtonButtonButtonButton
Ghostvariant=ghost
ButtonButtonButtonButtonButton
Destructivevariant=destructive
ButtonButtonButtonButtonButton
STATES

Every state, already drawn

Hover, focus, pressed and disabled are real variants in Figma, so prototypes and handoff never guess.

Buy nowdefault
Buy nowhover
Buy nowfocus
Buy nowpressed
Buy nowdisabled
ANATOMY

What a button is made of

Three parts, each tied to a token. Change the token once and every button follows.

1ContainerFill, radius and height. Auto layout hugs the label with fixed side padding.
2LabelGeist 600. One to three words, sentence case, never wraps.
3Focus ring2px brand-500 ring with a 2px gap. Shows on keyboard focus only.
TOKENS

Tokens used

The same names in Figma variables, CSS and the React theme.

color.button.primary.bg#0A0A0A
color.button.primary.fg#FFFFFF
color.button.accent.bg#715AFF
color.button.outline.border#E4E4E7
radius.button.md10px
space.button.md.x22px
size.button.md.height46px
font.label.md16 / 24 · 600
shadow.focus0 0 0 4px brand-500
USAGE

Do and don’t

A few rules that keep screens clear.

DoOne primary action per viewLead with a single primary button, and pair it with an outline button for the second choice.
Don’tTwo primary buttons side by sideWhen everything is primary, nothing is. People can’t tell which action matters.
DoWrite labels as verbsSay what happens: “Save changes”, “Invite team”. Keep it to one to three words.
Don’tVague or long labelsAvoid “Click here” or full sentences. The label should still make sense on its own.
ACCESSIBILITY

Built to be used by everyone

Covered in the component, so you don’t have to remember it on every screen.

01KeyboardReachable with Tab, triggered with Enter or Space.
02Visible focusA 2px purple ring with a white gap shows on every variant.
03ContrastLabel text meets WCAG AA on every fill, including Accent.
04Disabled and loadingUses aria-disabled and aria-busy so screen readers announce the state.
Start with the free Lite file

Build your next screen with Gridnivo

Every component, in Figma today and React soon. Same tokens, same names, one license.

Buy nowPreview in Figma