Button

Displays a button or a component that looks like a button.

Variants & Sizes

With Second Label

Add a secondary text below the primary label for additional context (center aligned).

Selected State

New selected state matching Tab selected styling (primary-dark background with contrast text).

Danger Color

Use the danger color for destructive actions like delete, remove, or cancel operations.

interface ButtonProps {
  size: 'small' | 'medium' | 'large';
  type: 'primary' | 'secondary' | 'tertiary' | 'textOnly';
  color?: 'default' | 'danger'; // default: 'default'
  state: 'enabled' | 'hovered' | 'focused' | 'disabled' | 'selected';
  label: string;
  secondLabel?: string; // Secondary text below button label (center aligned)
  decoIcon?: string;
  actionIcon?: string;
  onClickButton?: any;
  onClickActionIcon?: () => void;
  className?: string;
}