---
applyTo: "**/*.tsx,**/*.jsx"
---

# @cfx-dev/ui-components — Interactive Components

## Button

```tsx
import { Button, ButtonBar, LinkButton } from '@cfx-dev/ui-components';

// Basic button
<Button text="Continue" theme="primary" onClick={handleClick} />

// With icon
<Button text="Users" icon="Users" theme="tertiary" />
<Button text="Back" iconLeft="LeftArrow" theme="tertiary" />

// Icon only (no text)
<Button icon="Close" theme="tertiary" />

// Full width
<Button text="Submit" theme="primary" fullWidth />

// Disabled
<Button text="Unavailable" theme="primary" disabled />

// With decorator (e.g. badge)
<Button text="Notifications" theme="tertiary" decorator={<Badge color="error">3</Badge>} />
```

### Button Themes

| Theme | Use case |
|-------|----------|
| `'primary'` | Main CTA — accent colored fill |
| `'secondary'` | Secondary action — outlined |
| `'tertiary'` | Default/ghost — transparent background |
| `'on-light'` | Buttons on light backgrounds |
| `'linked'` | Link-styled button |
| `'quicklink'` | Quick-access card-style button |

### ButtonBar

Groups buttons with consistent spacing:

```tsx
<ButtonBar>
  <Button text="Cancel" theme="tertiary" />
  <Button text="Save" theme="primary" />
</ButtonBar>
```

### LinkButton

A button styled as a link:

```tsx
<LinkButton href="/settings" text="Settings" />
```

## Link

Styled anchor element:

```tsx
import { Link, ButtonLink } from '@cfx-dev/ui-components';

<Link href="https://example.com">Visit site</Link>
<Link href="/page" color="accent">Colored link</Link>
<Link disabled>Disabled link</Link>
<Link unstyled>No default styles</Link>
<Link theme="secondary">Secondary theme</Link>
```

## IconButton

Compact button rendering only an icon:

```tsx
import { IconButton } from '@cfx-dev/ui-components';

<IconButton name="Close" onClick={handleClose} />
<IconButton name="Settings" size="xsmall" areaSize="large" />
```

## Icon

Standalone icon display:

```tsx
import { Icon } from '@cfx-dev/ui-components';

<Icon name="Users" size="small" />
<Icon name="Tick" size="medium" color="green" />
<Icon name="Close" size={{ initial: 'small', bp768: 'medium' }} />
```

Icon sizes: `xsmall`, `small`, `medium`, `large`, `xlarge`, or a number (quant multiplier).

Icon names are defined by the `IconName` type — use your IDE autocomplete to discover available icons from the `Icons` and `IconsXLarge` objects.

## Interactive

Base interactive wrapper adding hover/click behavior:

```tsx
import { Interactive } from '@cfx-dev/ui-components';

<Interactive onClick={handleClick}>
  <div>Clickable content</div>
</Interactive>

<Interactive as="button" showPointer={false}>
  Custom interactive element
</Interactive>
```

## ClipboardButton

Copy-to-clipboard button with visual feedback:

```tsx
import { ClipboardButton } from '@cfx-dev/ui-components';

<ClipboardButton text="api-key-123" />
```

## BurgerMenu

Mobile hamburger menu:

```tsx
import { BurgerMenu, BurgerMenuButton } from '@cfx-dev/ui-components';

const items: BurgerMenuItem[] = [
  { label: 'Home', onClick: () => navigate('/') },
  { label: 'Settings', onClick: () => navigate('/settings') },
];

<BurgerMenu items={items} />
<BurgerMenuButton onClick={toggleMenu} />
```