Actions

Button

Text button with an optional leading or trailing icon.

variant: primary (the one action per view), secondary (bordered), ghost (toolbar, low emphasis), danger (destructive, confirm first).
size: sm 32, md 40, lg 52. loading swaps the icon for a spinner and sets aria-busy. block fills the width.
Labels are verbs in sentence case ("New Visualli", "Join early access"). Never two primaries side by side.

Playground

Change the props, switch theme in the header, try Tablet and Phone widths, then copy the code.

Playground

Examples

Live previewOpen ↗

Props

export interface ButtonProps {
  variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
  size?: 'sm' | 'md' | 'lg';
  icon?: IconName;
  iconEnd?: IconName;
  loading?: boolean;
  block?: boolean;
  disabled?: boolean;
  onClick?: () => void;
  children?: ReactNode
}

Use

import { Button } from '@visualli/design-system/components';

Source: components/src/ · Guidelines: components/catalog/Button/README.md