Button v0.5.1 · @behivetech

Examples of v0.5.1 are shown as code; only the latest version runs live. Open the live examples →

Primary Button

1const PrimaryButton = () => <Button variant="primary">Primary</Button>;
2
3render(<PrimaryButton />);

Secondary Button

1const SecondaryButton = () => (
2  <Button variant="secondary">Secondary</Button>
3);
4
5render(<SecondaryButton />);

Ghost Button

1const GhostButton = () => <Button variant="ghost">Ghost</Button>;
2
3render(<GhostButton />);

Danger Button

1const DangerButton = () => <Button variant="danger">Danger</Button>;
2
3render(<DangerButton />);

Small Button

1const SmallButton = () => <Button size="sm">Small</Button>;
2
3render(<SmallButton />);

Large Button

1const LargeButton = () => <Button size="lg">Large</Button>;
2
3render(<LargeButton />);

Loading Button

1const LoadingButton = () => <Button loading>Loading</Button>;
2
3render(<LoadingButton />);

Disabled Button

1const DisabledButton = () => <Button disabled>Disabled</Button>;
2
3render(<DisabledButton />);

Icon Only Button

1const IconOnlyButton = () => (
2  <Button iconOnly aria-label="Delete" variant="danger">
3    ✕
4  </Button>
5);
6
7render(<IconOnlyButton />);