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