Button

import { Button } from "@styple/design-system";

<Flex
  css={{
    flexDirection: "column",
    alignItems: "center",
    gap: "$md",
  }}
>
  <Button move>Move button</Button>
  <Button tactile>Tactile button</Button>
  <Button pill>Pill button</Button>
  <Button outline>Outline button</Button>
  <Button ghost>Ghost button</Button>
  <Button ghost aria-label="Button with plus icon"><Plus style={{ verticalAlign: "middle" }} /></Button>
  <Button highlight>Highlight button</Button>
  <Button highlight size="circle" aria-label="Button with plus icon"><Plus style={{ verticalAlign: "middle" }} /></Button>
  <Button size="sm">Small button</Button>
  <Button size="md">Medium button</Button>
  <Button size="lg">Large button</Button>
  <Button disabled>Disabled button</Button>

  <Button variant="primary">Primary</Button>
  <Button variant="primary" outline>Primary outline</Button>
  <Button variant="primary" ghost>Primary ghost</Button>
  <Button variant="primary" transparent>Primary transparent</Button>

  <Button variant="accent">Accent</Button>
  <Button variant="accent" outline>Accent outline</Button>
  <Button variant="accent" ghost>Accent ghost</Button>
  <Button variant="accent" transparent>Accent transparent</Button>

  <Button variant="danger">Danger</Button>
  <Button variant="danger" outline>Danger outline</Button>
  <Button variant="danger" ghost>Danger ghost</Button>
  <Button variant="danger" transparent>Danger transparent</Button>

  <Button variant="success">Success</Button>
  <Button variant="success" outline>Success outline</Button>
  <Button variant="success" ghost>Success ghost</Button>
  <Button variant="success" transparent>Success transparent</Button>
</Flex>