CloseButton

import

import { CloseButton } from '@bone-ui/close-button'

Basic

Loading...

<CloseButton />

<CloseButton />

LIVE DEMO

Sizes

Loading...

<Box toCenterY spaceX3> <CloseButton size="sm" /> <CloseButton size="md" /> <CloseButton size="lg" /> <CloseButton size={30} /> <CloseButton size={18} /> </Box>

<Box toCenterY spaceX3>
  <CloseButton size="sm" />
  <CloseButton size="md" />
  <CloseButton size="lg" />
  <CloseButton size={30} />
  <CloseButton size={18} />
</Box>

LIVE DEMO

Rounded

Loading...

<Box toCenterY spaceX3> <CloseButton size="sm" roundedFull /> <CloseButton size="md" roundedFull /> <CloseButton size="lg" roundedNone /> </Box>

<Box toCenterY spaceX3>
  <CloseButton size="sm" roundedFull />
  <CloseButton size="md" roundedFull />
  <CloseButton size="lg" roundedNone />
</Box>

LIVE DEMO

Customize background

Loading...

<Box toCenterY spaceX3> <CloseButton size="sm" bgBlack--T96 bgBlack--T90--hover roundedFull /> <CloseButton size="md" bgGreen100--T20 /> <CloseButton size="lg" bgBlack--T96 roundedFull /> </Box>

<Box toCenterY spaceX3>
  <CloseButton size="sm" bgBlack--T96 bgBlack--T90--hover roundedFull />
  <CloseButton size="md" bgGreen100--T20 />
  <CloseButton size="lg" bgBlack--T96 roundedFull />
</Box>

LIVE DEMO

Customize color

Loading...

<Box toCenterY spaceX3> <CloseButton size="sm" red600 /> <CloseButton size="md" green600 /> <CloseButton size="lg" purple600 /> </Box>

<Box toCenterY spaceX3>
  <CloseButton size="sm" red600 />
  <CloseButton size="md" green600 />
  <CloseButton size="lg" purple600 />
</Box>

LIVE DEMO