# Button

Native actions with a clear prominence, size and interaction state.

Connect Flood once using [the installation guide](https://flood.md/docs/installation). Then import the components you use; no per-component add command is needed.

## Example

```tsx
"use client";

import { FloodRoot, Inline, Button } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <Inline gap="2">
        <Button>Save changes</Button>
        <Button variant="subtle">Cancel</Button>
        <Button loading>Saving</Button>
      </Inline>
    </FloodRoot>
  );
}
```

## Design notes

- Button defaults to type="button". Set submit or reset deliberately inside forms.
- Loading disables activation and sets aria-busy. The host owns completion announcements.
- Prefer subtle for standalone secondary actions; ghost belongs in a clear parent context.
- Buttons use content width, including inside Stack. Opt into a full-width action with style={{ inlineSize: "100%" }} only when the composition calls for it.

## API reference

| Prop | Values | Default |
| --- | --- | --- |
| `variant` | `"solid" \| "subtle" \| "outline" \| "ghost"` | `"solid"` |
| `size` | `"2xs" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl"` | `"md"` |
| `loading` | `boolean` | `false` |
| `type` | `Inherited native HTML prop` | `"button"` |
| `Native HTML props` | `ButtonHTMLAttributes<HTMLButtonElement>` | `Forwarded` |