# Install

```shell
npm i @mate-react/button
```

# Import

```tsx
import { MateButton } from '@mate-react/button';
```

# Variants

## Primary

```tsx
<MateButton theme="primary" onClick={e => console.log(e)}>Primary</MateButton>
```

## Secondary

```tsx
<MateButton>Secondary</MateButton>
```

## Tertiary

```tsx
<MateButton theme="tertiary">Tertiary</MateButton>
```

## Success

```tsx
<MateButton theme="success">Success</MateButton>
```

## Error / Danger

```tsx
<MateButton theme="error">Error</MateButton>
```

## Disabled

```tsx
<MateButton disabled>Disabled</MateButton>
```

## Icon

```tsx
<MateButton theme="icon">
  <span theme="icon" role="img" aria-label="add aria label">add</span>
</MateButton>
```

> [!WARNING]
> Do not use aria labels on icon and button at the same time, as they both will be read out! Same goes for grid cells, when they contain actions.

## Prefix Icon

```tsx
<MateButton>
  <span theme="icon" role="img" slot="prefix">chevron_left</span>
  <span>Backward</span>
</MateButton>
```

## Suffix Icon

```tsx
<MateButton>
  <span>Forward</span>
  <span theme="icon" role="img" slot="suffix">chevron_right</span>
</MateButton>
```

## Icon unstyled

```tsx
<MateButton theme="icon unstyled">
  <span theme="icon" role="img">add</span>
</MateButton>