Button

import

import { Button } from '@bone-ui/button'

Basic

Loading...

<Button>Button</Button>

<Button>Button</Button>

LIVE DEMO

Sizes

Loading...

<Box toCenterY spaceX4> <Button size="sm">Small</Button> <Button size="md">Middle</Button> <Button size="lg">Large</Button> <Button size={60}>Size 60</Button> <Button size={80}>Size 80</Button> </Box>

<Box toCenterY spaceX4>
  <Button size="sm">Small</Button>
  <Button size="md">Middle</Button>
  <Button size="lg">Large</Button>
  <Button size={60}>Size 60</Button>
  <Button size={80}>Size 80</Button>
</Box>

LIVE DEMO

Color Scheme

Loading...

<Box toCenterY space4 flexWrap="wrap"> <Button>Default</Button> <Button colorScheme="red500">red500</Button> <Button colorScheme="yellow500">yellow500</Button> <Button colorScheme="pink500">pink500</Button> <Button colorScheme="green500">green500</Button> <Button colorScheme="blue400">blue400</Button> <Button colorScheme="blue400">blue400</Button> <Button colorScheme="black">Black</Button> </Box>

<Box toCenterY space4 flexWrap="wrap">
  <Button>Default</Button>
  <Button colorScheme="red500">red500</Button>
  <Button colorScheme="yellow500">yellow500</Button>
  <Button colorScheme="pink500">pink500</Button>
  <Button colorScheme="green500">green500</Button>
  <Button colorScheme="blue400">blue400</Button>
  <Button colorScheme="blue400">blue400</Button>
  <Button colorScheme="black">Black</Button>
</Box>

LIVE DEMO

Light

Loading...

<Box toLeft spaceX4 flexWrap="wrap"> <Button variant="light" colorScheme="red500"> red500 </Button> <Button variant="light" colorScheme="teal500"> teal500 </Button> <Button variant="light" colorScheme="green600"> green600 </Button> <Button variant="light" colorScheme="green700"> green700 </Button> <Button variant="light" colorScheme="yellow500"> yellow500 </Button> <Button variant="light" colorScheme="gray700"> gray800 </Button> </Box>

<Box toLeft spaceX4 flexWrap="wrap">
  <Button variant="light" colorScheme="red500">
    red500
  </Button>

  <Button variant="light" colorScheme="teal500">
    teal500
  </Button>

  <Button variant="light" colorScheme="green600">
    green600
  </Button>

  <Button variant="light" colorScheme="green700">
    green700
  </Button>
  <Button variant="light" colorScheme="yellow500">
    yellow500
  </Button>

  <Button variant="light" colorScheme="gray700">
    gray800
  </Button>
</Box>

LIVE DEMO

Ghost

Loading...

<Box toCenterY spaceX4 flexWrap="wrap"> <Button variant="ghost" colorScheme="red500"> red500 </Button> <Button variant="ghost" colorScheme="yellow500"> yellow500 </Button> <Button variant="ghost" colorScheme="orange500"> orange500 </Button> <Button variant="ghost" colorScheme="pink500"> pink500 </Button> <Button variant="ghost" colorScheme="green500"> green500 </Button> <Button variant="ghost" colorScheme="blue500"> blue500 </Button> <Button variant="ghost" colorScheme="purple500"> purple500 </Button> <Button variant="ghost" colorScheme="indigo500"> indigo500 </Button> </Box>

<Box toCenterY spaceX4 flexWrap="wrap">
  <Button variant="ghost" colorScheme="red500">
    red500
  </Button>
  <Button variant="ghost" colorScheme="yellow500">
    yellow500
  </Button>
  <Button variant="ghost" colorScheme="orange500">
    orange500
  </Button>
  <Button variant="ghost" colorScheme="pink500">
    pink500
  </Button>
  <Button variant="ghost" colorScheme="green500">
    green500
  </Button>
  <Button variant="ghost" colorScheme="blue500">
    blue500
  </Button>
  <Button variant="ghost" colorScheme="purple500">
    purple500
  </Button>
  <Button variant="ghost" colorScheme="indigo500">
    indigo500
  </Button>
</Box>

LIVE DEMO

Outline

Loading...

<Box row space-20 flexWrap="wrap"> <Button variant="outline" colorScheme="red500"> red500 </Button> <Button variant="outline" colorScheme="yellow500"> yellow500 </Button> <Button variant="outline" colorScheme="orange500"> orange500 </Button> <Button variant="outline" colorScheme="pink500"> pink500 </Button> <Button variant="outline" colorScheme="green500"> green500 </Button> <Button variant="outline" colorScheme="blue500"> blue500 </Button> <Button variant="outline" colorScheme="purple500"> purple500 </Button> <Button variant="outline" colorScheme="indigo500"> indigo500 </Button> <Button variant="outline" colorScheme="black"> Black </Button> <Button variant="outline" colorScheme="green500" borderDashed> green500 </Button> <Button variant="outline" colorScheme="green500" borderDotted> green500 </Button> </Box>

<Box row space-20 flexWrap="wrap">
  <Button variant="outline" colorScheme="red500">
    red500
  </Button>
  <Button variant="outline" colorScheme="yellow500">
    yellow500
  </Button>
  <Button variant="outline" colorScheme="orange500">
    orange500
  </Button>
  <Button variant="outline" colorScheme="pink500">
    pink500
  </Button>
  <Button variant="outline" colorScheme="green500">
    green500
  </Button>
  <Button variant="outline" colorScheme="blue500">
    blue500
  </Button>
  <Button variant="outline" colorScheme="purple500">
    purple500
  </Button>
  <Button variant="outline" colorScheme="indigo500">
    indigo500
  </Button>
  <Button variant="outline" colorScheme="black">
    Black
  </Button>

  <Button variant="outline" colorScheme="green500" borderDashed>
    green500
  </Button>

  <Button variant="outline" colorScheme="green500" borderDotted>
    green500
  </Button>
</Box>

LIVE DEMO

Link

Loading...

<Box row space-20 flexWrap="wrap"> <Button as="a" variant="outline" href="https://github.com" target="_blank" colorScheme="green500" borderNone > Link </Button> </Box>

<Box row space-20 flexWrap="wrap">
  <Button
    as="a"
    variant="outline"
    href="https://github.com"
    target="_blank"
    colorScheme="green500"
    borderNone
  >
    Link
  </Button>
</Box>

LIVE DEMO

Disabled

Loading...

<Box row space-20 flexWrap="wrap"> <Button disabled>Default</Button> <Button disabled colorScheme="gray500"> gray500 </Button> <Button disabled colorScheme="red500" variant="outline"> red500 </Button> <Button disabled variant="light" colorScheme="teal500"> teal500 </Button> <Button disabled variant="ghost" colorScheme="purple500"> purple500 </Button> <Button disabled icon={<DownloadOutline />} /> </Box>

<Box row space-20 flexWrap="wrap">
  <Button disabled>Default</Button>
  <Button disabled colorScheme="gray500">
    gray500
  </Button>
  <Button disabled colorScheme="red500" variant="outline">
    red500
  </Button>
  <Button disabled variant="light" colorScheme="teal500">
    teal500
  </Button>
  <Button disabled variant="ghost" colorScheme="purple500">
    purple500
  </Button>
  <Button disabled icon={<DownloadOutline />} />
</Box>

LIVE DEMO

Loading

Loading...

<Box toCenterY space-20 flexWrap="wrap"> <Button loading size="sm"> Small </Button> <Button loading>Submitting...</Button> <Button variant="outline" loading> Submitting... </Button> <Button variant="outline" colorScheme="black" loading> Submitting... </Button> <Button loading size="lg"> Large </Button> <Button loading size={60}> Size 60 </Button> </Box>

<Box toCenterY space-20 flexWrap="wrap">
  <Button loading size="sm">
    Small
  </Button>
  <Button loading>Submitting...</Button>
  <Button variant="outline" loading>
    Submitting...
  </Button>
  <Button variant="outline" colorScheme="black" loading>
    Submitting...
  </Button>
  <Button loading size="lg">
    Large
  </Button>
  <Button loading size={60}>
    Size 60
  </Button>
</Box>

LIVE DEMO

Block

Loading...

<Box spaceY-20> <Button w-100p>Default</Button> <Button variant="outline" w-100p> Outline </Button> <Button variant="light" w-100p> Light </Button> <Button variant="ghost" w-100p> Ghost </Button> </Box>

<Box spaceY-20>
  <Button w-100p>Default</Button>
  <Button variant="outline" w-100p>
    Outline
  </Button>
  <Button variant="light" w-100p>
    Light
  </Button>
  <Button variant="ghost" w-100p>
    Ghost
  </Button>
</Box>

LIVE DEMO

With Icon

Loading...

<Box row spaceX-20> <Button leftIcon={<DownloadOutline />}>LeftIcon</Button> <Button leftIcon={<MailSolid />}>RightIcon</Button> <Button leftIcon={<DownloadOutline />}>With icon</Button> <Button rightIcon={<ArrowRightOutline />}>RightIcon</Button> </Box>

<Box row spaceX-20>
  <Button leftIcon={<DownloadOutline />}>LeftIcon</Button>
  <Button leftIcon={<MailSolid />}>RightIcon</Button>
  <Button leftIcon={<DownloadOutline />}>With icon</Button>
  <Button rightIcon={<ArrowRightOutline />}>RightIcon</Button>
</Box>

LIVE DEMO

Icon Button

Loading...

<Box row space-20 flexWrap="wrap"> <Button icon={<MailSolid />} rounded-0 /> <Button icon={<DownloadOutline />} /> <Button icon={<ArrowRightOutline />} rounded-10 /> <Button icon={<MailSolid />} rounded-9999 /> <Button variant="outline" icon={<MailSolid />} rounded-0 /> <Button variant="outline" icon={<DownloadOutline />} /> <Button variant="outline" icon={<ArrowRightOutline />} rounded-10 borderDashed /> <Button variant="outline" icon={<MailSolid />} rounded-9999 /> <Button variant="light" colorScheme="red500" icon={<MailSolid />} rounded-0 /> <Button variant="light" colorScheme="blue500" icon={<DownloadOutline />} /> <Button variant="light" colorScheme="teal500" icon={<ArrowRightOutline />} rounded-10 borderDashed /> <Button variant="light" colorScheme="pink500" icon={<MailSolid />} rounded-9999 /> <Button variant="ghost" icon={<MailSolid />} rounded-0 /> <Button variant="ghost" icon={<DownloadOutline />} /> <Button variant="ghost" icon={<ArrowRightOutline />} rounded-10 borderDashed /> <Button variant="ghost" icon={<MailSolid />} rounded-9999 /> </Box>

<Box row space-20 flexWrap="wrap">
  <Button icon={<MailSolid />} rounded-0 />
  <Button icon={<DownloadOutline />} />
  <Button icon={<ArrowRightOutline />} rounded-10 />
  <Button icon={<MailSolid />} rounded-9999 />

  <Button variant="outline" icon={<MailSolid />} rounded-0 />
  <Button variant="outline" icon={<DownloadOutline />} />
  <Button variant="outline" icon={<ArrowRightOutline />} rounded-10 borderDashed />
  <Button variant="outline" icon={<MailSolid />} rounded-9999 />

  <Button variant="light" colorScheme="red500" icon={<MailSolid />} rounded-0 />
  <Button variant="light" colorScheme="blue500" icon={<DownloadOutline />} />
  <Button
    variant="light"
    colorScheme="teal500"
    icon={<ArrowRightOutline />}
    rounded-10
    borderDashed
  />
  <Button variant="light" colorScheme="pink500" icon={<MailSolid />} rounded-9999 />

  <Button variant="ghost" icon={<MailSolid />} rounded-0 />
  <Button variant="ghost" icon={<DownloadOutline />} />
  <Button variant="ghost" icon={<ArrowRightOutline />} rounded-10 borderDashed />
  <Button variant="ghost" icon={<MailSolid />} rounded-9999 />
</Box>

LIVE DEMO