Button

Primary action trigger with four variants and three sizes.

Previewlive — edit controls below

Content

Label

Appearance

variant

size

type

State

disabled

Basic

import { Button } from "@loom/muslin-react";

<Button variant="primary">Save</Button>

Destructive

<Button variant="destructive">Delete invoice</Button>

Saving state

loading disables the button and shows a spinner.

import { Button } from "@loom/muslin-react";

<Button loading>Saving…</Button>

Form footer

Ghost cancel next to the primary action.

import { Button } from "@loom/muslin-react";

<div className="flex justify-end gap-2">
  <Button variant="ghost" size="sm">Cancel</Button>
  <Button size="sm">Save changes</Button>
</div>