---
title: Button
description: A platform-adaptive button with Material and iOS styling.
---
import Source from './_generated/button.mdx';

A platform-adaptive button — Material ripple and tonal fills on Android, iOS control styling on iOS.

<DemoFrame component="button" />

## Installation

```bash
npx touchcn add button
```

## Usage

<CodeGroup>

```html Angular
<button tcnButton variant="primary" size="md">Save</button>
<button tcnButton variant="ghost">Cancel</button>
```

```tsx React
import { TcnButton } from '@/components/ui/button';

<TcnButton variant="primary" size="md">Save</TcnButton>
<TcnButton variant="ghost">Cancel</TcnButton>
```

```vue Vue
<script setup lang="ts">
import { TcnButton } from '@/components/ui/button';
</script>

<template>
  <TcnButton variant="primary" size="md">Save</TcnButton>
  <TcnButton variant="ghost">Cancel</TcnButton>
</template>
```

</CodeGroup>

## Props

| Prop      | Type                                          | Default     | Description        |
| --------- | --------------------------------------------- | ----------- | ------------------ |
| `variant` | `'primary' \| 'secondary' \| 'outlined' \| 'elevated' \| 'ghost' \| 'destructive'` | `'primary'` | Visual style.      |
| `size`    | `'sm' \| 'md' \| 'lg'`                        | `'md'`      | Control size.      |

<Source />