Badge

import { Badge } from "@medway-ui/core";
 
<div className="flex gap-2">
  <Badge>Label</Badge>
  <Badge icon={<Star />}>Label</Badge>
  <Badge icon={<Star />} />
  <Badge>0</Badge>
  <Badge>WK</Badge>
</div>

import { Badge } from "@medway-ui/core";
 
<div className="flex gap-2">
  <Badge variant="freemium">Label</Badge>
  <Badge variant="freemium" icon={<Star />}>Label</Badge>
  <Badge variant="freemium" icon={<Star />} />
  <Badge variant="freemium">0</Badge>
  <Badge variant="freemium">99</Badge>
</div>

import { Badge } from "@medway-ui/core";
 
<div className="flex gap-2">
  <Badge variant="error">Label</Badge>
  <Badge variant="error" icon={<Star />}>Label</Badge>
  <Badge variant="error" icon={<Star />} />
  <Badge variant="error">0</Badge>
  <Badge variant="error">99</Badge>
</div>

import { Badge } from "@medway-ui/core";
 
<div className="flex gap-2">
  <Badge variant="warning">Label</Badge>
  <Badge variant="warning" icon={<Star />}>Label</Badge>
  <Badge variant="warning" icon={<Star />} />
  <Badge variant="warning">0</Badge>
  <Badge variant="warning">99</Badge>
</div>

import { Badge } from "@medway-ui/core";
 
<div className="flex flex-wrap items-center gap-3">
  <Badge size="sm">Label</Badge>
  <Badge size="md">Label</Badge>
  <Badge size="lg">Label</Badge>
  <Badge size="xl">Label</Badge>
  <Badge size="sm" variant="freemium" icon={<Star />} />
  <Badge size="md" variant="freemium" icon={<Star />} />
  <Badge size="lg" variant="freemium" icon={<Star />} />
  <Badge size="xl" variant="freemium" icon={<Star />} />
  <Badge size="sm" variant="error" icon={<Star />} />
  <Badge size="md" variant="error" icon={<Star />} />
  <Badge size="lg" variant="error" icon={<Star />} />
  <Badge size="xl" variant="error" icon={<Star />} />
  <Badge size="sm" variant="warning" icon={<Star />} />
  <Badge size="md" variant="warning" icon={<Star />} />
  <Badge size="lg" variant="warning" icon={<Star />} />
  <Badge size="xl" variant="warning" icon={<Star />} />
</div>

import { Badge } from "@medway-ui/core";
import { Star } from "@medway-ui/icons";
 
<div className="flex flex-wrap items-center gap-3">
  <Badge animation="shine">Shine</Badge>
  <Badge animation="shine" icon={<Star />}>With Icon</Badge>
</div>