Button

Versatile button component optimized for professional editor interfaces. Supports multiple variants, sizes, loading states, and icons.

Live Preview

Import

import { Button } from 'entangle-ui';

Usage

<Button variant="default" size="md">
  Save
</Button>

Variants

The variant prop controls the button’s visual style.

default

Transparent with border, fills on hover. Use for secondary actions.

<Button variant="default">Default</Button>

ghost

No border, subtle hover state. Use for inline or low-emphasis actions.

<Button variant="ghost">Ghost</Button>

filled

Solid background with accent color. Use for primary actions.

<Button variant="filled">Filled</Button>

Sizes

Sizes are optimized for editor interface density.

<Button size="sm">Small (20px)</Button>
<Button size="md">Medium (24px)</Button>
<Button size="lg">Large (32px)</Button>

| Size | Height | Use case | | ---- | ------ | ----------------- | | sm | 20px | Compact toolbars | | md | 24px | Standard panels | | lg | 32px | Prominent actions |

With Icon

Pass an icon element via the icon prop. Icons should be 16x16px for optimal appearance.

import { SaveIcon, PlayIcon } from 'entangle-ui';

<Button icon={<SaveIcon />}>Save</Button>
<Button icon={<PlayIcon />} variant="filled">Play</Button>

Loading State

The loading prop shows a spinner and disables interaction. Use for async operations.

<Button loading>Saving...</Button>
<Button loading variant="filled">Publishing</Button>

Full Width

The fullWidth prop makes the button span the full width of its container. Useful for form actions and modal buttons.

<Button variant="filled" fullWidth>
  Confirm Action
</Button>

Disabled

<Button disabled>Disabled</Button>
<Button disabled variant="filled">Disabled Filled</Button>

Combining Props

<Button
  icon={<SaveIcon />}
  variant="filled"
  size="lg"
  loading={isSaving}
  onClick={handleSave}
>
  Save Project
</Button>

Props

Prop	Type	Default	Description
children	ReactNode	—	Button content — text, icons, or other React elements.
variant	'default' | 'ghost' | 'filled'	'default'	Visual variant of the button.
size	'sm' | 'md' | 'lg'	'md'	Size variant optimized for editor interfaces.
disabled	boolean	false	Whether the button is disabled.
loading	boolean	false	Loading state — shows spinner and disables interaction.
icon	ReactNode	—	Icon element to display before text. Should be 16x16px.
fullWidth	boolean	false	Whether the button should take the full width of the container.
onClick	(event: MouseEvent) => void	—	Click event handler.
className	string	—	Additional CSS class names.
style	CSSProperties	—	Inline styles.
testId	string	—	Test identifier for automated testing.
ref	Ref<HTMLButtonElement>	—	Ref to the underlying button element.

The component also accepts all standard HTML <button> attributes.

Accessibility

• Renders a native <button> element
• Supports keyboard navigation (Enter/Space to activate)
• disabled and loading states set disabled on the native element
• Use meaningful text content or aria-label for icon-only buttons