Badge

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

export default function DefaultBadge() {
    return <Badge>Hello</Badge>;
}

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

export default function BadgeColor() {
    return (
        <div className="flex flex-wrap gap-2">
            <Badge color="primary">Primary</Badge>
            <Badge color="hint">Hint</Badge>
            <Badge color="danger">Danger</Badge>
            <Badge color="success">Success</Badge>
            <Badge color="warning">Warning</Badge>
            <Badge color="contrast">Contrast</Badge>
        </div>
    );
}

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

export default function BadgeShape() {
    return (
        <div className="flex flex-wrap gap-2">
            <Badge shape="square">Rectangle</Badge>
            <Badge shape="pill">Pill</Badge>
        </div>
    );
}

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

export default function BadgeSize() {
    return (
        <div className="flex flex-wrap items-center gap-2">
            <Badge size="sm">Small</Badge>
            <Badge size="md">Medium</Badge>
            <Badge size="lg">Large</Badge>
        </div>
    );
}