Tag

import { Tag, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Tag>Tag</Tag>
  </BrowserWindow>
);

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

render(
  <BrowserWindow docs>
    <Flex>
      <Tag color="#e61b1b">red</Tag>
      <Tag color="#0099FF">blue</Tag>
      <Tag color="#9b069b">purple</Tag>
      <Tag color="#ff6347">tomato</Tag>
      <Tag color="#068d6b">teal</Tag>
    </Flex>
  </BrowserWindow>
);

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

render(
  <BrowserWindow docs>
    <Box>
      {/* large */}
      <Flex>
        <Tag size="large" color="#e61b1b">
          red
        </Tag>
        <Tag size="large" color="#0099FF">
          blue
        </Tag>
        <Tag size="large" color="#9b069b">
          purple
        </Tag>
        <Tag size="large" color="#ff6347">
          tomato
        </Tag>
        <Tag size="large" color="#068d6b">
          teal
        </Tag>
      </Flex>

      {/* medium */}
      <Flex>
        <Tag size="medium" color="#e61b1b">
          red
        </Tag>
        <Tag size="medium" color="#0099FF">
          blue
        </Tag>
        <Tag size="medium" color="#9b069b">
          purple
        </Tag>
        <Tag size="medium" color="#ff6347">
          tomato
        </Tag>
        <Tag size="medium" color="#068d6b">
          teal
        </Tag>
      </Flex>

      {/* small */}
      <Flex>
        <Tag size="small" color="#e61b1b">
          red
        </Tag>
        <Tag size="small" color="#0099FF">
          blue
        </Tag>
        <Tag size="small" color="#9b069b">
          purple
        </Tag>
        <Tag size="small" color="#ff6347">
          tomato
        </Tag>
        <Tag size="small" color="#068d6b">
          teal
        </Tag>
      </Flex>
    </Box>
  </BrowserWindow>
);