Button

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

Examples

Use solid for primary actions, outline for secondary actions with a white surface and a fine border, and ghost for low-priority actions. Link buttons use the theme color without padding, border or a fixed control height; use the Link component for navigation. Loading preserves the label and prevents duplicate clicks. Set type="submit" for form submission, and aria-label for icon-only actions.

On activation, solid and outlined buttons emit a wave that quickly expands outside the button and slowly fades while the button and label stay still. Ghost and link buttons do not emit a wave. Solid buttons brighten on hover and deepen on press; outlined buttons keep their surface and change their text and border colors. Danger actions use red. The wave follows the theme and respects regional and system motion preferences.

variants.tsx

import { Button, Space } from '@ifhover/leaf-ui';

export function ButtonVariants() {
  return (
    <Space wrap>
      <Button>Primary</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="link">Link</Button>
    </Space>
  );
}

danger.tsx

import { Button, Space } from '@ifhover/leaf-ui';

import { Trash2 } from 'lucide-react';

export function ButtonDanger() {
  return (
    <Space wrap>
      <Button danger startIcon={<Trash2 />}>
        Delete project
      </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>
    </Space>
  );
}

sizes.tsx

import { Button, Space } from '@ifhover/leaf-ui';

export function ButtonSizes() {
  return (
    <Space wrap>
      <Button size="sm">Small</Button>
      <Button size="md">Default</Button>
      <Button size="lg">Large</Button>
    </Space>
  );
}

states.tsx

import { Button, Space } from '@ifhover/leaf-ui';

export function ButtonStates() {
  return (
    <Space wrap>
      <Button disabled>Unavailable</Button>
      <Button loading>Loading</Button>
      <Button variant="outline" disabled>
        Disabled
      </Button>
    </Space>
  );
}

Try saving changes.

loading.tsx

import { Button, Space } from '@ifhover/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 (
    <Space wrap>
      <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>
    </Space>
  );
}

icons.tsx

import { Button, Space } from '@ifhover/leaf-ui';

import { ArrowRight, Plus, Trash2 } from 'lucide-react';

export function ButtonIcons() {
  return (
    <Space wrap>
      <Button startIcon={<Plus />}>New project</Button>
      <Button variant="outline" endIcon={<ArrowRight />}>
        Continue
      </Button>
      <Button variant="outline" aria-label="Add project" startIcon={<Plus />} />
      <Button danger variant="outline" aria-label="Delete project" startIcon={<Trash2 />} />
    </Space>
  );
}

full-width.tsx

import { Button } from '@ifhover/leaf-ui';

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

Extended features

Button group

Split button

extensions.tsx

import { Button, ButtonGroup, Flex, Space, SplitButton, Text } from '@ifhover/leaf-ui';

export function ExtensionDemo() {
  return (
    <Space direction="vertical" align="start">
      <Flex direction="column" gap="sm" align="center">
        <Text>Button group</Text>
        <ButtonGroup>
          <Button variant="outline">Previous</Button>
          <Button variant="outline">Next</Button>
        </ButtonGroup>
      </Flex>
      <Flex direction="column" gap="sm" align="center">
        <Text>Split button</Text>
        <SplitButton
          items={[
            { key: 'copy', label: 'Save a copy' },
            { key: 'draft', label: 'Save draft' },
          ]}
        >
          Save
        </SplitButton>
      </Flex>
    </Space>
  );
}

Button API

Property	Type	Default	Description
`variant`	`'solid' \| 'outline' \| 'ghost' \| 'link'`	`'solid'`	Visual style
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Control size
`danger`	`boolean`	`false`	Danger colors; works with every variant
`loading`	`boolean`	`false`	Show loading and disable interaction
`fullWidth`	`boolean`	`false`	Fill the parent width
`startIcon`	`ReactNode`	—	Leading icon; replaced by the spinner during loading
`endIcon`	`ReactNode`	—	Trailing icon
`disabled`	`boolean`	`false`	Disable interaction.
`type`	`'button' \| 'submit' \| 'reset'`	`'button'`	Native button type
`ref`	`Ref<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 '@ifhover/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.

Extension types

import type { ButtonGroupProps, SplitButtonProps } from '@ifhover/leaf-ui';

ButtonGroupProps API

Property	Type	Default	Description
`size`	`'sm' \| 'md' \| 'lg'`	—	Size or spacing preset
`disabled`	`boolean`	—	Disable interaction.
`attached`	`boolean`	`true`	Join adjacent buttons

SplitButtonProps API

Property	Type	Default	Description
`variant`	`'solid' \| 'outline' \| 'ghost' \| 'link'`	—	Button appearance
`size`	`'sm' \| 'md' \| 'lg'`	—	Size or spacing preset
`danger`	`boolean`	—	Danger colors
`loading`	`boolean`	—	Loading state
`fullWidth`	`boolean`	—	Fill available width
`startIcon`	`ReactNode`	—	Leading icon
`endIcon`	`ReactNode`	—	Trailing icon
`items`	`readonly DropdownItem[]`	Required	Required. Items; keep keys unique and stable
`menuLabel`	`string`	—	Accessible menu button label
`dropdownProps`	`Omit<DropdownProps, 'items' \| 'children' \| 'disabled'>`	—	Action menu props

#Button

#Examples

#Extended features

#Button API

#Types

#Forms and localization

#Extension types

#ButtonGroupProps API

#SplitButtonProps API