---
name: Button
menu: Components
---

import { PropsTable, Playground } from 'docz';

import { Grid } from '~/components/Grid';
import { ButtonSmall } from '~/components/ButtonSmall';
import { ButtonLarge } from '~/components/ButtonLarge';
import { ButtonLink } from '~/components/ButtonLink';
import { Link } from '~/components/Link';
import { Icon } from '~/components/Icon';
import { SvgPlus } from '~/images/icons/Plus';
import { Button } from '../Button';

# Button

<PropsTable of={Button} />

## Basic usage

<Playground>
  <Grid justifyItems="center">
    <Button>Click me</Button>
    <Button variant="secondary">Click me</Button>
    <Button variant="ghost">Click me</Button>
    <ButtonSmall>Click me</ButtonSmall>
    <ButtonLarge disabled>Click me</ButtonLarge>
    <Button variant="ghost" iconPosition="left">
      <Icon Asset={SvgPlus} />
      Click me
    </Button>
    <Button as="a" href="http://www.google.com" variant="ghost">
      As link
    </Button>
    <ButtonLink RouterLink={Link} href="http://www.google.com" variant="ghost">
      As Link
    </ButtonLink>
  </Grid>
</Playground>
