<Row gap="sm">
  <Badge text="Default" />
  <Badge text="Primary" variant="primary" />
  <Badge text="Success" variant="success" />
  <Badge text="Warning" variant="warning" />
  <Badge text="Error" variant="error" />
  <Badge text="Info" variant="info" />
</Row>

<Row gap="sm">
  <Badge text="Default" outline />
  <Badge text="Primary" variant="primary" outline />
  <Badge text="Success" variant="success" outline />
  <Badge text="Warning" variant="warning" outline />
  <Badge text="Error" variant="error" outline />
</Row>

{/* Custom solid badge */}
<Badge text="Custom" color="#8B5CF6" textColor="#FFFFFF" />

{/* Custom outline badge */}
<Badge
  text="Purple"
  outline
  color="#8B5CF6"
/>

{/* Multiple custom badges */}
<Row gap="sm">
  <Badge text="Teal" color="#14B8A6" />
  <Badge text="Pink" color="#EC4899" />
  <Badge text="Orange" color="#F97316" />
</Row>

<Row gap="sm" align="center">
  <Badge text="Small" size="sm" variant="primary" />
  <Badge text="Medium" size="md" variant="primary" />
  <Badge text="Large" size="lg" variant="primary" />
</Row>

<Row gap="sm">
  <Badge text="New" icon="sparkles" variant="primary" />
  <Badge text="Verified" icon="check" variant="success" />
  <Badge text="Alert" icon="alert-triangle" variant="warning" />
</Row>

<Row gap="sm">
  <Badge text="Pill" radius="full" variant="primary" />
  <Badge text="Rounded" radius="lg" variant="primary" />
  <Badge text="Subtle" radius="md" variant="primary" />
  <Badge text="Sharp" radius="sm" variant="primary" />
</Row>

<Row gap="sm">
  <Badge text="Active" variant="success" />
  <Badge text="Pending" variant="warning" />
  <Badge text="Inactive" variant="default" />
  <Badge text="Failed" variant="error" />
</Row>

<Row gap="sm" wrap>
  <Badge text="React" color="#61DAFB" textColor="#000" />
  <Badge text="TypeScript" color="#3178C6" />
  <Badge text="Node.js" color="#339933" />
  <Badge text="GraphQL" color="#E10098" />
</Row>

<Card>
  <Row gap="md" align="start">
    <Image src="https://example.com/product.jpg" size="lg" />
    <Col gap="xs" flex={1}>
      <Row justify="space-between" align="center">
        <Title value="Product Name" size="sm" />
        <Badge text="In Stock" variant="success" size="sm" />
      </Row>
      <Text value="Product description goes here" color="muted" />
      <Text value="$99.99" weight="bold" />
    </Col>
  </Row>
</Card>

<Row gap="sm" align="center">
  <Icon name="bell" size="lg" />
  <Badge text="5" variant="error" size="sm" />
</Row>

<Row gap="sm">
  <Badge text="P0 - Critical" variant="error" />
  <Badge text="P1 - High" variant="warning" />
  <Badge text="P2 - Medium" variant="info" />
  <Badge text="P3 - Low" variant="default" />
</Row>