> ## Documentation Index
> Fetch the complete documentation index at: https://docs.tappify.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# TapButton

> Renders a button in the host's styling, in one of four variants.

```ts theme={null}
function TapButton(__namedParameters): ReactElement;
```

Renders a button in the host's styling, in one of four variants.

## Parameters

### \_\_namedParameters

[`TapButtonProps`](/extensions/reference/frontend-api/Interface.TapButtonProps)

## Returns

`ReactElement`

## Remarks

Draws on `--tap-accent` and `--tap-accent-fg` for `primary`, `--bg-raised`,
`--fg-default` and `--divider` for `secondary`, `--fg-muted` for `ghost` and
`--tap-danger` for `danger`, and takes its radius from `--tap-radius`. The
element defaults to `type="button"`, so a button inside a `TapForm` does not
submit it unless you pass `type="submit"`. `loading` disables the button, so a
click cannot land twice.

## Example

```tsx theme={null}
import { TapButton } from '@tappify/extension-sdk';

function ExportRow({ busy, onExport }: { busy: boolean; onExport: () => void }) {
  return (
    <TapButton variant="secondary" size="sm" loading={busy} onClick={onExport}>
      Export
    </TapButton>
  );
}
```