# XWUIFab

A single Material floating action button for the primary action on a screen (MUI FAB equivalent). It can be a compact circular button or, with `extended: true` plus a `label`, a pill that shows text beside the icon. Pick a `size` (`sm` / `md` / `lg`) and `variant` (`surface` / `primary` / `secondary` / `tertiary`); set `href` to render an anchor instead of a button, or pass an `onClick` handler in data. The `icon` accepts a raw `<svg>` string or an icon name.

## Usage

```ts
import { XWUIFab } from './XWUIFab';

const fab = new XWUIFab(
  container,
  { icon: '<svg viewBox="0 0 24 24">…</svg>', label: 'Compose', onClick: () => openComposer() },
  { size: 'lg', variant: 'primary', extended: true, ariaLabel: 'Compose message' }
);
```

## Basic Usage

A standard circular FAB with an inline SVG icon and a click handler.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: A standard circular FAB with an inline SVG icon and a click handler.
```

## Variants

The four color variants: surface / primary / secondary / tertiary.

```example
file: examples/Variants.ts
html: examples/Variants.html
title: Variants
description: The four color variants: surface / primary / secondary / tertiary.
```

## Extended

An extended FAB shows a text label beside the icon (icon + label pill).

```example
file: examples/Extended.ts
html: examples/Extended.html
title: Extended
description: An extended FAB shows a text label beside the icon (icon + label pill).
```

```api
```