styple

Badge

A visual indicator of some value.

Examples

Small Large Primary Accent Danger Success Interactive

import { Badge } from "@styple/design-system";

<Flex
  css={{
    flexDirection: "column",
    alignItems: "flex-start",
    gap: "$md",
  }}
>
  <Badge>Small</Badge>
  <Badge size="lg">Large</Badge>
  <Badge variant="primary">Primary</Badge>
  <Badge variant="accent">Accent</Badge>
  <Badge variant="danger">Danger</Badge>
  <Badge variant="success">Success</Badge>
  <Badge as="a" href="#" interactive>Interactive</Badge>
  <Badge as="button" disabled>Disabled</Badge>
</Flex>

API Reference

Badge

A styled component with props:

Prop	Type	Default	Explanation
`interactive?`	`boolean`	-	Interactive variant.
`size`	`string`	`"sm"`	Size variant.
`variant`	`string`	`"normal"`	Main variant.

Avatar

Button