Dot

import

import { Dot } from '@bone-ui/dot'

Basic

Loading...

<Dot></Dot>

<Dot></Dot>

LIVE DEMO

Types

Loading...

<Box spaceX5 toLeft> <Dot type="error">Error</Dot> <Dot type="info">Info</Dot> <Dot type="success">Success</Dot> <Dot type="warning">Warning</Dot> </Box>

<Box spaceX5 toLeft>
  <Dot type="error">Error</Dot>
  <Dot type="info">Info</Dot>
  <Dot type="success">Success</Dot>
  <Dot type="warning">Warning</Dot>
</Box>

LIVE DEMO

With Text

Loading...

<Box spaceY3 column> <Dot bgTeal400>Dot 1</Dot> <Dot bgPink400>Dot 2</Dot> <Dot bgGreen500>Dot 2</Dot> </Box>

<Box spaceY3 column>
  <Dot bgTeal400>Dot 1</Dot>
  <Dot bgPink400>Dot 2</Dot>
  <Dot bgGreen500>Dot 2</Dot>
</Box>

LIVE DEMO

Customize size

Loading...

<Box spaceY-10 column> <Dot bgRed400 square3> Size 1 </Dot> <Dot bgPurple400 square4> Size 2 </Dot> <Dot bgTeal400 square5> Size 3 </Dot> </Box>

<Box spaceY-10 column>
  <Dot bgRed400 square3>
    Size 1
  </Dot>
  <Dot bgPurple400 square4>
    Size 2
  </Dot>
  <Dot bgTeal400 square5>
    Size 3
  </Dot>
</Box>

LIVE DEMO

Rounded

Loading...

<Box spaceX5 toLeft> <Dot type="error" roundedNone></Dot> <Dot type="info" rounded-2></Dot> <Dot type="success" square4 rounded-4></Dot> <Dot type="warning"></Dot> </Box>

<Box spaceX5 toLeft>
  <Dot type="error" roundedNone></Dot>
  <Dot type="info" rounded-2></Dot>
  <Dot type="success" square4 rounded-4></Dot>
  <Dot type="warning"></Dot>
</Box>

LIVE DEMO

Bordered

Loading...

<Box spaceX5 toLeft> <Dot bgYellow300 square-16 border borderYellow800></Dot> <Dot bgRed300 square-16 border-2 borderRed800></Dot> </Box>

<Box spaceX5 toLeft>
  <Dot bgYellow300 square-16 border borderYellow800></Dot>
  <Dot bgRed300 square-16 border-2 borderRed800></Dot>
</Box>

LIVE DEMO