# Text Button

A native button for low-emphasis actions with lightweight text styling.

## Installation

```tsx
import { TextButton } from "@makeplane/propel/components/text-button";
```
## Usage

`TextButton` performs an action with lightweight text-only styling and no underline. It always
renders native button semantics. Use [AnchorButton](/components/anchor-button) instead when
activation navigates to a destination, or [Button](/components/button) when the action needs button
chrome.

```tsx
import { TextButton } from "@makeplane/propel/components/text-button";

export default function BasicDemo() {
  return <TextButton label="Try again" variant="primary" size="md" onClick={() => undefined} />;
}
```
## Examples

### Variants

`primary` is the blue action; `secondary` is the muted gray action.

```tsx
import { TextButton } from "@makeplane/propel/components/text-button";

export default function VariantsDemo() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      <TextButton label="Select all" variant="primary" size="md" onClick={() => undefined} />
      <TextButton label="Clear filters" variant="secondary" size="md" onClick={() => undefined} />
    </div>
  );
}
```

### Sizes

`size` supports the `md` and `lg` text and glyph steps (md 28 / lg 32 px). Because this is
text-only chrome, a size changes the label and icon rather than introducing control height or
padding.

```tsx
import { TextButton } from "@makeplane/propel/components/text-button";

export default function SizesDemo() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      <TextButton label="Show more" variant="primary" size="md" onClick={() => undefined} />
      <TextButton label="Show more" variant="primary" size="lg" onClick={() => undefined} />
    </div>
  );
}
```

### With an icon

Pass `icon` and pick its side with `iconPosition` (`start` by default).

```tsx
import { Icon } from "@makeplane/propel/components/icon";
import { TextButton } from "@makeplane/propel/components/text-button";
import { AddOutline, SettingsOutline } from "@makeplane/propel/icons";

export default function WithIconDemo() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      <TextButton
        label="Add condition"
        variant="primary"
        size="md"
        icon={<Icon icon={AddOutline} />}
        onClick={() => undefined}
      />
      <TextButton
        label="Configure"
        variant="secondary"
        size="md"
        icon={<Icon icon={SettingsOutline} />}
        iconPosition="end"
        onClick={() => undefined}
      />
    </div>
  );
}
```

### Disabled

`disabled` uses the native, non-focusable disabled state and the disabled text and icon tokens.

```tsx
import { Icon } from "@makeplane/propel/components/icon";
import { TextButton } from "@makeplane/propel/components/text-button";
import { AddOutline, SettingsOutline } from "@makeplane/propel/icons";

export default function DisabledDemo() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      <TextButton
        label="Add condition"
        variant="primary"
        size="md"
        icon={<Icon icon={AddOutline} />}
        disabled
      />
      <TextButton
        label="Configure"
        variant="secondary"
        size="md"
        icon={<Icon icon={SettingsOutline} />}
        iconPosition="end"
        disabled
      />
    </div>
  );
}
```
## API Reference

### TextButton

A native button for low-emphasis actions with lightweight text-only chrome. It lays out an
optional `icon` beside the label. Unlike AnchorButton, TextButton never changes to link semantics
and does not expose a render target.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` (required) | `"primary" \| "secondary"` | — |  |
| `size` (required) | `"md" \| "lg"` | — |  |
| `label` (required) | `string` | — | Visible action label. |
| `icon` | `ReactNode` | — | Icon rendered beside the label (inline-start by default), e.g. `<Icon icon={Plus} />`. |
| `iconPosition` | `"start" \| "end"` | `start` | Which side of the label the icon sits on. |
| `disabled` | `boolean` | — | Uses the native, non-focusable disabled state. |
| `type` | `"button" \| "submit" \| "reset"` | `button` | The button's form behavior. |