Leaf UI
  • English

      • Button

      Trigger an action, such as saving, submitting or deleting.

      Examples

      Use solid for primary actions, soft for subtle emphasis, outline for secondary actions and ghost for low-priority actions. Loading preserves the label and prevents duplicate clicks. Set type="submit" for form submission, and aria-label for icon-only actions.

      Live previewVariants
      variants.tsx
      import { Button } from '@sudden3/leaf-ui';

export function ButtonVariants() {
  return (
    <>
      <Button>Primary</Button>
      <Button variant="soft">Soft</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="ghost">Ghost</Button>
    </>
  );
}
      Live previewDanger actions
      danger.tsx
      import { Button } from '@sudden3/leaf-ui';
import { Trash2 } from 'lucide-react';

export function ButtonDanger() {
  return (
    <>
      <Button danger startIcon={<Trash2 />}>
        Delete project
      </Button>
      <Button danger variant="soft">
        Remove member
      </Button>
      <Button danger variant="outline">
        Revoke access
      </Button>
      <Button danger variant="ghost">
        Clear
      </Button>
      <Button danger disabled>
        Deletion disabled
      </Button>
      <Button danger loading>
        Deleting
      </Button>
    </>
  );
}
      Live previewSizes
      sizes.tsx
      import { Button } from '@sudden3/leaf-ui';

export function ButtonSizes() {
  return (
    <>
      <Button size="sm">Small</Button>
      <Button size="md">Default</Button>
      <Button size="lg">Large</Button>
    </>
  );
}
      Live previewDisabled and loading
      states.tsx
      import { Button } from '@sudden3/leaf-ui';

export function ButtonStates() {
  return (
    <>
      <Button disabled>Unavailable</Button>
      <Button loading>Loading</Button>
      <Button variant="outline" disabled>
        Disabled
      </Button>
    </>
  );
}
      Live previewAsync saving
      Try saving changes.
      loading.tsx
      import { Button } from '@sudden3/leaf-ui';
import { useEffect, useRef, useState } from 'react';

export function ButtonLoading() {
  const [status, setStatus] = useState<'idle' | 'loading' | 'saved'>('idle');
  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);

  useEffect(() => () => clearTimeout(timer.current), []);

  function save() {
    clearTimeout(timer.current);
    setStatus('loading');
    // This example simulates a request; replace it with your application request.
    timer.current = setTimeout(() => setStatus('saved'), 1200);
  }

  return (
    <>
      <Button loading={status === 'loading'} onClick={save}>
        {status === 'loading' ? 'Saving' : status === 'saved' ? 'Save again' : 'Save changes'}
      </Button>
      <span role="status">{status === 'saved' ? 'Changes saved.' : 'Try saving changes.'}</span>
    </>
  );
}
      Live previewIcons
      icons.tsx
      import { Button } from '@sudden3/leaf-ui';
import { ArrowRight, Plus, Trash2 } from 'lucide-react';

export function ButtonIcons() {
  return (
    <>
      <Button startIcon={<Plus />}>New project</Button>
      <Button variant="outline" endIcon={<ArrowRight />}>
        Continue
      </Button>
      <Button variant="soft" aria-label="Add project" startIcon={<Plus />} />
      <Button danger variant="outline" aria-label="Delete project" startIcon={<Trash2 />} />
    </>
  );
}
      Live previewFull width
      full-width.tsx
      import { Button } from '@sudden3/leaf-ui';

export function ButtonFullWidth() {
  return <Button fullWidth>Continue</Button>;
}

      Button API

      PropertyTypeDefaultDescription
      variant'solid' | 'soft' | 'outline' | 'ghost''solid'Visual style
      size'sm' | 'md' | 'lg''md'Control size
      dangerbooleanfalseDanger colors; works with every variant
      loadingbooleanfalseShow loading and disable interaction
      disabledbooleanfalseDisable interaction
      fullWidthbooleanfalseFill the parent width
      startIconReactNode—Leading icon; replaced by the spinner during loading
      endIconReactNode—Trailing icon
      type'button' | 'submit' | 'reset''button'Standard button type
      refRef<HTMLButtonElement>—DOM reference

      Types

      Import ButtonProps to describe component props. Option types in the API table link to their detailed fields above.

      import type { ButtonProps } from '@sudden3/leaf-ui';

      Forms and localization

      Use name to include values in FormData. Uncontrolled fields follow form reset; reset controlled values in application state. Place controls in FormField for labels, help and errors. ConfigProvider supplies regional themes and translated built-in UI. Application labels and options are your responsibility.