import { Playground, Props } from "@slytrunk/docs";
import { View } from "../View";
import { Text } from "../Text";
import { Icon } from "./IconMock";
import Button from "./Button";

# Button

Base component for rendering a button.

<Props of={Button} />

## Basic usage

### Primary

<Playground>
  <Button variant="primary">
    <Text>Hello world</Text>
  </Button>
</Playground>

### Secondary

<Playground>
  <Button variant="secondary">
    <Text>Hello world</Text>
  </Button>
</Playground>

### Tertiary

<Playground>
  <Button variant="tertiary">
    <Text>Hello world</Text>
  </Button>
</Playground>

## Content

### Icon + Text

<Playground>
  <Button variant="primary">
    <Icon name="plus" />
    <Text>Hello world</Text>
  </Button>
</Playground>

### Text + Icon

<Playground>
  <Button variant="primary">
    <Text>Hello world</Text>
    <Icon name="plus" />
  </Button>
</Playground>

### Icon

<Playground>
  <Button variant="primary">
    <Icon name="plus" />
  </Button>
</Playground>

## Modifiers

### Pill

<Playground>
  <Button pill variant="primary">
    <Text>Hello world</Text>
  </Button>
</Playground>

### Disabled

<Playground>
  <Button disabled variant="primary">
    <Text>Hello world</Text>
  </Button>
</Playground>

### Loading

<Playground>
  <Button loading variant="primary">
    <Text>Hello world</Text>
  </Button>
</Playground>