# Button

Displays a native button or anchor that looks like a shadcn-style button, translated to Angular attribute selectors and standalone imports.

Use Button for primary actions, secondary actions, icon-only controls, and semantic links that should share the same visual language.

## Import

```ts
import { ButtonComponent } from '@edsis/component/button';
```

## Usage

```html
<button Button type="button" variant="default">Save</button>
<button Button variant="outline" size="sm">Cancel</button>
<a Button variant="link" href="/learn-more">Learn more</a>
```

Choose the correct native host for the job: `<button>` for actions and `<a>` for navigation.

## Common patterns

### Variants

Use `variant` for emphasis: `default`, `secondary`, `destructive`, `outline`, `ghost`, or `link`.

```html
<button Button variant="default">Save</button>
<button Button variant="secondary">Duplicate</button>
<button Button variant="destructive">Delete</button>
<button Button variant="outline">Outline</button>
<button Button variant="ghost">Ghost</button>
<a Button variant="link" href="/learn-more">Learn more</a>
```

### Sizes

Use `size` for compact or icon-only controls: `xs`, `sm`, `default`, `lg`, `icon-xs`, `icon-sm`, `icon`, `icon-lg`.

```html
<button Button size="xs" variant="outline">Extra small</button>
<button Button size="sm" variant="outline">Small</button>
<button Button size="default" variant="outline">Default</button>
<button Button size="lg" variant="outline">Large</button>
<button Button size="icon-xs" variant="outline" aria-label="Extra small icon button">+</button>
<button Button size="icon-sm" variant="outline" aria-label="Small icon button">+</button>
<button Button size="icon" variant="outline" aria-label="Default icon button">+</button>
<button Button size="icon-lg" variant="outline" aria-label="Large icon button">+</button>
```

### Rounded buttons

Pass `class="rounded-full"` when you want a pill or circular button without changing the base API.

```html
<button Button variant="outline" class="rounded-full px-5">Invite teammate</button>
<button Button variant="outline" size="icon" class="rounded-full" aria-label="Scroll to top">
  <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
    <path d="m12 19 0-14" />
    <path d="m5 12 7-7 7 7" />
  </svg>
</button>
```

### Loading and disabled states

Project a spinner element into the button and set `disabled` while async work is pending.

```html
<button Button variant="outline" disabled>
  <span
    aria-hidden="true"
    class="inline-block h-3.5 w-3.5 animate-spin rounded-full border-2 border-current border-t-transparent"
  ></span>
  Generating
</button>
```

### Semantic host mapping

React's `asChild` pattern maps to choosing the right native host directly in Angular templates.

```html
<button Button type="button">Save changes</button>
<a Button href="/account" variant="link">Go to account</a>
```

## API reference

| Input     | Type                                                                                 | Default     |
| --------- | ------------------------------------------------------------------------------------ | ----------- |
| `variant` | `'default' \| 'secondary' \| 'destructive' \| 'outline' \| 'ghost' \| 'link'`        | `'default'` |
| `size`    | `'xs' \| 'sm' \| 'default' \| 'lg' \| 'icon-xs' \| 'icon-sm' \| 'icon' \| 'icon-lg'` | `'default'` |
| `class`   | `string`                                                                             | `''`        |

The selected variant + size are also exposed via `data-variant` / `data-size`
attributes on the host for styling overrides.

Hosts: `button[Button]` and `a[Button]`.

Re-exports: `buttonVariants`, `ButtonVariant`, `ButtonSize`.

## Styling and theming

Tokens: `--primary`, `--primary-foreground`, `--secondary`, `--destructive`,
`--border`, `--accent`, `--ring`.

Every state (hover, focus-visible, active, disabled) is covered by the variants.
Focus-visible uses a 2px `ring-ring` outline for keyboard users.

Pass `class` to layer width, shape, and spacing overrides such as `rounded-full`, `w-full`, or responsive layout utilities.

The local primitive already opts into `cursor-pointer` for interactive hosts, so you do not need an extra Tailwind base-layer override to restore button cursors.

## Accessibility

Attribute selectors force you to pick a real semantic element:

- Use `<button Button>` for actions that don't navigate.
- Use `<a Button href="…">` for navigation.
- Add an `aria-label` to icon-only buttons.
- Use `type="button"` inside forms unless the button should submit.

Avoid faking buttons with `<div>` — keyboard and screen-reader support depend on
the native element.

## Keyboard interactions

- Native buttons support Tab, Enter, and Space automatically.
- Anchors with `href` participate in normal link focus and Enter activation.

## Angular notes

- Import `ButtonComponent` into the standalone component that renders the host element.
- There is no Angular `asChild` input; pick the semantic host element directly.

## Source parity

This Angular version follows the shadcn Button information architecture while translating examples to native hosts, standalone imports, and Angular-friendly template patterns.