Button - LUSTER Design System

Variant

Primary

Secondary

Style

Filled

Text

Size

Small

Medium

Icon Only

State

Default

Hover

Focus

Disabled

Design Specifications

Property	Value	Notes
Padding X	var(--buttonLgPaddingX)	32px horizontal padding (Large)
Padding Y	var(--buttonLgPaddingY)	16px vertical padding (Large)
Border Radius	var(--buttonBorderRadius)	Theme-driven · Square / Round / Pills
Font Family	var(--buttonFontFamily)	Inter
Title Font Size	var(--buttonLgFontSize)	16px (Large) · 12px (Small)
Title Line Height	var(--buttonLgFontLineHeight)	19px (Large)
Title Font Weight	var(--buttonLgFontWeight)	400 (Regular)
Primary Background	var(--buttonPrimaryDefaultBgColor)	#916DFF
Primary Text Color	var(--buttonPrimaryFontColor)	#F2EDFF
Secondary Background	var(--buttonSecondaryDefaultBgColor)	#8F8B96
Secondary Text Color	var(--buttonSecondaryFontColor)	#F1F1F2
Disabled Opacity	var(--buttonOpacity)	50% (disabled state)

Design Tokens

Token Name	Figma Variable	Default Value
--buttonPrimaryFontColor	Button/Primary/Font/Color	#F2EDFF
--buttonPrimaryIconColor	Button/Primary/Icon/Color	#F2EDFF
--buttonPrimaryDefaultBgColor	Button/Primary/Default/Bg/Color	#916DFF
--buttonPrimaryDefaultTextColor	Button/Primary/Default/Text/Font/Color	#916DFF
--buttonPrimaryDefaultTextIconColor	Button/Primary/Default/Text/Icon/Color	#916DFF
--buttonPrimaryHoverBgColor	Button/Primary/Hover/Bg/Color	#794DFF
--buttonPrimaryHoverTextColor	Button/Primary/Hover/Text/Font/Color	#794DFF
--buttonPrimaryHoverTextIconColor	Button/Primary/Hover/Text/Icon/Color	#794DFF
--buttonPrimaryFocusBgColor	Button/Primary/Focus/Bg/Color	#6741D9
--buttonPrimaryFocusTextColor	Button/Primary/Focus/Text/Font/Color	#6741D9
--buttonPrimaryFocusTextIconColor	Button/Primary/Focus/Text/Icon/Color	#6741D9
--buttonSecondaryFontColor	Button/Secondary/Font/Color	#F1F1F2
--buttonSecondaryIconColor	Button/Secondary/Icon/Color	#F1F1F2
--buttonSecondaryDefaultBgColor	Button/Secondary/Default/Bg/Color	#8F8B96
--buttonSecondaryDefaultTextColor	Button/Secondary/Default/Text/Font/Color	#8F8B96
--buttonSecondaryDefaultTextIconColor	Button/Secondary/Default/Text/Icon/Color	#8F8B96
--buttonSecondaryHoverBgColor	Button/Secondary/Hover/Bg/Color	#76717F
--buttonSecondaryHoverTextColor	Button/Secondary/Hover/Text/Font/Color	#76717F
--buttonSecondaryHoverTextIconColor	Button/Secondary/Hover/Text/Icon/Color	#76717F
--buttonSecondaryFocusBgColor	Button/Secondary/Focus/Bg/Color	#64606C
--buttonSecondaryFocusTextColor	Button/Secondary/Focus/Text/Font/Color	#64606C
--buttonSecondaryFocusTextIconColor	Button/Secondary/Focus/Text/Icon/Color	#64606C
--buttonSmPaddingX	Button/Sm/Padding/X	28px
--buttonSmPaddingY	Button/Sm/Padding/Y	12px
--buttonLgPaddingX	Button/Lg/Padding/X	32px
--buttonLgPaddingY	Button/Lg/Padding/Y	16px
--buttonIconPaddingX	Button/Icon/Padding/X	16px
--buttonIconPaddingY	Button/Icon/Padding/Y	16px
--buttonBorderRadius	Button/Border/Radius	0px
--buttonOpacity	Button/Opacity	50%
--buttonFontFamily	Body/Font/Family	Inter
--buttonSmFontSize	Typography/Button/Sm/Font/Size	12px
--buttonSmFontLineHeight	Typography/Button/Sm/Font/LineHeight	14px
--buttonSmFontWeight	Typography/Button/Sm/Font/Weight	400
--buttonLgFontSize	Typography/Button/Lg/Font/Size	16px
--buttonLgFontLineHeight	Typography/Button/Lg/Font/LineHeight	19px
--buttonLgFontWeight	Typography/Button/Lg/Font/Weight	400

Usage Guidelines

✓ DO

Use Primary for the main action, Secondary for alternatives.

✓ DO

Reserve Focus color for keyboard navigation states.

✕ DON'T

Don't use buttons for navigation — use links.

✕ DON'T

Don't override the 50% disabled opacity.

Implementation

Values shown are the Diamond brand, Light mode defaults (the Figma file's default mode). Other brands (Amber, Opal) and Dark mode resolve to different values via the Color Theme & Component Brand collections.

import React from 'react';
import './Button.css';

export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'primary' | 'secondary';
  styleType?: 'filled' | 'text';
  size?: 'small' | 'medium' | 'iconOnly';
}

export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ variant = 'primary', styleType = 'filled', size = 'medium', className = '', children, ...props }, ref) => {
    const classes = [
      'btn',
      `btn--${variant}`,
      `btn--${styleType}`,
      `btn--${size}`,
      className,
    ].join(' ').trim();

    return (
      <button ref={ref} className={classes} {...props}>
        {children}
      </button>
    );
  }
);

Button.displayName = 'Button';

/* Button tokens — generated from LUSTER Figma variables */
:root {
  /* Primary */
  --buttonPrimaryDefaultBgColor: #916DFF;
  --buttonPrimaryHoverBgColor: #794DFF;
  --buttonPrimaryFocusBgColor: #6741D9;
  --buttonPrimaryFontColor: #F2EDFF;
  /* Secondary */
  --buttonSecondaryDefaultBgColor: #8F8B96;
  --buttonSecondaryHoverBgColor: #76717F;
  --buttonSecondaryFocusBgColor: #64606C;
  --buttonSecondaryFontColor: #F1F1F2;
  /* Sizing & shape */
  --buttonSmPadding: 12px 28px;
  --buttonLgPadding: 16px 32px;
  --buttonIconPadding: 16px;
  --buttonBorderRadius: 0px;
  --buttonOpacity: 0.5;
  --buttonFontFamily: 'Inter', sans-serif;
}

.btn {
  font-family: var(--buttonFontFamily);
  font-weight: 400;
  border: 1px solid transparent;
  border-radius: var(--buttonBorderRadius);
  cursor: pointer;
  transition: background 0.15s ease;
}

/* Sizes */
.btn--small    { padding: var(--buttonSmPadding); font-size: 12px; line-height: 14px; }
.btn--medium   { padding: var(--buttonLgPadding); font-size: 16px; line-height: 19px; }
.btn--iconOnly { padding: var(--buttonIconPadding); }

/* Primary · Filled */
.btn--primary.btn--filled {
  background: var(--buttonPrimaryDefaultBgColor);
  color: var(--buttonPrimaryFontColor);
}
.btn--primary.btn--filled:hover { background: var(--buttonPrimaryHoverBgColor); }
.btn--primary.btn--filled:focus-visible { background: var(--buttonPrimaryFocusBgColor); outline: none; }

/* Secondary · Filled */
.btn--secondary.btn--filled {
  background: var(--buttonSecondaryDefaultBgColor);
  color: var(--buttonSecondaryFontColor);
}
.btn--secondary.btn--filled:hover { background: var(--buttonSecondaryHoverBgColor); }
.btn--secondary.btn--filled:focus-visible { background: var(--buttonSecondaryFocusBgColor); outline: none; }

/* Text style */
.btn--primary.btn--text   { background: transparent; color: var(--buttonPrimaryDefaultBgColor); border-color: var(--buttonPrimaryDefaultBgColor); }
.btn--secondary.btn--text { background: transparent; color: var(--buttonSecondaryDefaultBgColor); border-color: var(--buttonSecondaryDefaultBgColor); }

/* Disabled */
.btn:disabled { opacity: var(--buttonOpacity); cursor: not-allowed; }

<!-- Primary filled, medium -->
<button class="btn btn--primary btn--filled btn--medium">Button</button>

<!-- Secondary text, small -->
<button class="btn btn--secondary btn--text btn--small">Button</button>

<!-- Disabled -->
<button class="btn btn--primary btn--filled btn--medium" disabled>Button</button>

import { Button } from '@luster/ui';

export default function Example() {
  return (
    <>
      <Button variant="primary" size="medium">Save</Button>
      <Button variant="secondary" styleType="text">Cancel</Button>
      <Button variant="primary" disabled>Submitting…</Button>
    </>
  );
}