Badge

import { Badge } from '@zeal-ui/core';

<Container type="col" width="100%">
    <Badge color="primary">Primary</Badge>
    <Badge color="secondary">Secondary</Badge>
    <Badge color="accent">Accent</Badge>
    <Badge color="error">Error</Badge>
    <Badge color="warning">Warning</Badge>
    <Badge color="success">Success</Badge>
</Container>;

const BadgeStyled = styled(Container)`
  .badge{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0rem;
  }
  .icon{
    border-radius: 50%;
    margin-right: 0.5rem;
  }
`;

render(
    <BadgeStyled>
        <Badge width="10rem" height="2rem" color="secondary" className="badge">
            <Image src="/phone.svg" alt="phone" width="1.5rem" height="1.5rem" className="icon" />
            <Text>Badge with Icon</Text>
        </Badge>
    </BadgeStyled>,
);