Badge

Badge description here.

Props

Badge properties

Property	Description	Type	Default
bg	Background color of the badge	`string`	-
color	Color of the badge text	`string`	-
text	Badge text	`ReactNode`	-
shape	Shape of the badge	`circle` `square` `pill`	`square`
size	Size of the badge	`large` `medium` `small`	`small`
position	Position of badge relative to parent element	`middle` `top`	-

Usage

Size

Dark Mode

camara.space

Preview

import { Badge, BrowserWindow, Flex } from 'camara';

render(
  <BrowserWindow docs>
    <Flex>
      <Badge size="large" text="Preview" />
      <Badge size="medium" text="Preview" />
      <Badge size="small" text="Preview" />
    </Flex>
  </BrowserWindow>
);

import { Badge, BrowserWindow, Flex } from 'camara';

render(
  <BrowserWindow docs>
    <Flex>
      <Badge size="large" text="Preview" />
      <Badge size="medium" text="Preview" />
      <Badge size="small" text="Preview" />
    </Flex>
  </BrowserWindow>
);

Shape

Dark Mode

camara.space

Preview

import { Badge, Box, BrowserWindow, Flex } from 'camara';

render(
  <BrowserWindow docs>
    <Flex>
      <Box>
        <Badge shape="square" size="large" text="Preview" />
        <Badge shape="square" size="medium" text="Preview" />
        <Badge shape="square" size="small" text="Preview" />
      </Box>
      <Box>
        <Badge shape="pill" size="large" text="Preview" />
        <Badge shape="pill" size="medium" text="Preview" />
        <Badge shape="pill" size="small" text="Preview" />
      </Box>
      <Box>
        <Badge shape="circle" size="large" text="M" />
        <Badge shape="circle" size="medium" text="M" />
        <Badge shape="circle" size="small" text="M" />
      </Box>
    </Flex>
  </BrowserWindow>
);

import { Badge, Box, BrowserWindow, Flex } from 'camara';

render(
  <BrowserWindow docs>
    <Flex>
      <Box>
        <Badge shape="square" size="large" text="Preview" />
        <Badge shape="square" size="medium" text="Preview" />
        <Badge shape="square" size="small" text="Preview" />
      </Box>
      <Box>
        <Badge shape="pill" size="large" text="Preview" />
        <Badge shape="pill" size="medium" text="Preview" />
        <Badge shape="pill" size="small" text="Preview" />
      </Box>
      <Box>
        <Badge shape="circle" size="large" text="M" />
        <Badge shape="circle" size="medium" text="M" />
        <Badge shape="circle" size="small" text="M" />
      </Box>
    </Flex>
  </BrowserWindow>
);

Background Color

Dark Mode

camara.space

Preview

import { Badge, Box, BrowserWindow, Flex } from 'camara';

render(
  <BrowserWindow docs>
    <Flex>
      <Box>
        <Badge
          shape="square"
          size="large"
          text="Preview"
          bg="purple"
          color="#fff"
        />
        <Badge
          shape="square"
          size="medium"
          text="Preview"
          bg="purple"
          color="#fff"
        />
        <Badge
          shape="square"
          size="small"
          text="Preview"
          bg="purple"
          color="#fff"
        />
      </Box>

      <Box>
        <Badge
          shape="pill"
          size="large"
          text="Preview"
          bg="purple"
          color="#fff"
        />
        <Badge
          shape="pill"
          size="medium"
          text="Preview"
          bg="purple"
          color="#fff"
        />
        <Badge
          shape="pill"
          size="small"
          text="Preview"
          bg="purple"
          color="#fff"
        />
      </Box>

      <Box>
        <Badge shape="circle" size="large" text="M" bg="purple" color="#fff" />
        <Badge shape="circle" size="medium" text="M" bg="purple" color="#fff" />
        <Badge shape="circle" size="small" text="M" bg="purple" color="#fff" />
      </Box>
    </Flex>
  </BrowserWindow>
);

import { Badge, Box, BrowserWindow, Flex } from 'camara';

render(
  <BrowserWindow docs>
    <Flex>
      <Box>
        <Badge
          shape="square"
          size="large"
          text="Preview"
          bg="purple"
          color="#fff"
        />
        <Badge
          shape="square"
          size="medium"
          text="Preview"
          bg="purple"
          color="#fff"
        />
        <Badge
          shape="square"
          size="small"
          text="Preview"
          bg="purple"
          color="#fff"
        />
      </Box>

      <Box>
        <Badge
          shape="pill"
          size="large"
          text="Preview"
          bg="purple"
          color="#fff"
        />
        <Badge
          shape="pill"
          size="medium"
          text="Preview"
          bg="purple"
          color="#fff"
        />
        <Badge
          shape="pill"
          size="small"
          text="Preview"
          bg="purple"
          color="#fff"
        />
      </Box>

      <Box>
        <Badge shape="circle" size="large" text="M" bg="purple" color="#fff" />
        <Badge shape="circle" size="medium" text="M" bg="purple" color="#fff" />
        <Badge shape="circle" size="small" text="M" bg="purple" color="#fff" />
      </Box>
    </Flex>
  </BrowserWindow>
);

Badge

Props

Usage

Size

Shape

Background Color

On this page