# ButtonStyledAsLink

> Slug: `button-styled-as-link` · Category: Actions

## When to use
- Trigger an in-page action that should look like a text link rather than a button (e.g., "Forgot password?", "Resend code").
- Keep semantics of a `<button>` (not navigation) while the visual is link-styled.
- Render an inline link inside a paragraph when the action does not navigate.

## When NOT to use
- The action navigates to a different URL — use `Link` (anchor with link styling).
- You want a styled CTA that looks like a button — use `Button` or `LinkStyledAsButton`.
- Icon-only — use `IconButton`.

## Variants & decision tree
- Inline inside a paragraph -> `inline` (drops `data-size`, removes block sizing).
- Standalone link sized by token -> set `size="large" | "medium" | "small"`.
- Dark surface -> set `inverse` (or rely on `ArrowThemeProvider`).
- Brand-neutral context -> set `monochrome`.

## States
- `disabled` — uses `aria-disabled` (focusable) and prevents activation.
- Inverse via theme provider or `inverse` prop.

## Props
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| **`label`** | `ReactNode` | — | Visible label text/content. |
| `size` | `'large' \| 'medium' \| 'small'` | `'large'` | Type scale (ignored when `inline`). |
| `inline` | `boolean` | `false` | Render inline within text flow. |
| `monochrome` | `boolean` | `false` | Use neutral palette. |
| `inverse` | `boolean` | inherits | Dark-background styling. |
| `disabled` | `boolean` | `false` | Sets `aria-disabled`. |
| `type` | `'button' \| 'submit' \| 'reset'` | `'button'` | Native button type. |
| `a11yLabel` | `string` | — | Override accessible name. |
| `describedBy` | `string` | — | `aria-describedby`. |

## Usage examples
```tsx
import { ButtonStyledAsLink } from 'arrow-react-bootstrap';

// Standalone "forgot password" action
<ButtonStyledAsLink label="Forgot password?" onClick={openReset} />

// Inline inside copy
<p>
  Trouble signing in? <ButtonStyledAsLink inline label="Get help" onClick={openHelp} />
</p>

// Smaller scale, monochrome on a card
<ButtonStyledAsLink size="small" monochrome label="Edit details" onClick={openEditor} />
```

## Composition
- Use inside `Tidbit` action slot when the affordance is "click to do something" (not "click to navigate").
- Pair with `TextField` helper text for in-form actions like "Resend code".
- `ButtonTray.supplementaryAction` falls back to this component when no `linkUrl` is provided.

## Accessibility
- Renders a real `<button>`; activates on Enter/Space.
- Provide `a11yLabel` if the visible label is ambiguous out of context.
- Avoid mixing with `<a>` — this is a button, never a navigation.

## Do / Don't
- Do: use for "actions that look like links".
- Do: pass `inline` when sitting inside a sentence or paragraph.
- Don't: use for navigation — pick `Link`.
- Don't: pass `href`; this renders a button.
