> Badge

Badge

Différents variants de badges. Composant de type Typography.

TagsuiInformationsFigmaExemples3StylesDisponibles

Variants

Badge defaultBadge infoBadge errorBadge newBadge successBadge warningBadge disabled

export const Variants = () => (
  <Box>
    <Box display="flex" flexDirection="column" gap={4}>
      <Badge size="md" variant="default">
        Badge default
      </Badge>
      <Badge size="md" variant="info">
        Badge info
      </Badge>
      <Badge size="md" variant="error">
        Badge error
      </Badge>
      <Badge size="md" variant="new">
        Badge new
      </Badge>
      <Badge size="md" variant="success">
        Badge success
      </Badge>
      <Badge size="md" variant="warning">
        Badge warning
      </Badge>
      <Badge size="md" variant="disabled">
        Badge disabled
      </Badge>
    </Box>
  </Box>
);

Sizes

Badge smallBadge medium

export const Sizes = () => (
  <Box display="flex" flexDirection="row" gap={4} flexWrap="wrap">
    <Badge size="sm" variant="info" m="auto">
      Badge small
    </Badge>
    <Badge size="md" variant="info">
      Badge medium
    </Badge>
  </Box>
);

Icons

Badge small

export const Icons = () => (
  <Box display="flex" flexDirection="row" gap={4} flexWrap="wrap">
    <Badge size="sm" variant="info" icon="Check">
      Badge small
    </Badge>
  </Box>
);

Alveole UI Kit — v1.8.4