Badge

1import { Badge } from '@/components/ui/badge';
2import { Flex } from '@/components/ui/flex';
3import { Stack } from '@/components/ui/stack';
4
5export function Default() {
6  return (
7    <Stack gap="1" className="border-border bg-card w-full max-w-sm rounded-xl border p-4">
8      <Flex align="center" gap="2">
9        <p className="truncate text-sm font-medium">Acme Studio</p>
10        <Badge>Pro</Badge>
11      </Flex>
12      <p className="text-muted-foreground text-xs">Renews Apr 12, 7 of 10 seats used</p>
13    </Stack>
14  );
15}

1import { Badge } from '@/components/ui/badge';
2import { Flex } from '@/components/ui/flex';
3import { Stack } from '@/components/ui/stack';
4
5export function Default() {
6  return (
7    <Stack gap="1" className="border-border bg-card w-full max-w-sm rounded-xl border p-4">
8      <Flex align="center" gap="2">
9        <p className="truncate text-sm font-medium">Acme Studio</p>
10        <Badge>Pro</Badge>
11      </Flex>
12      <p className="text-muted-foreground text-xs">Renews Apr 12, 7 of 10 seats used</p>
13    </Stack>
14  );
15}

1'use client';
2
3import { Avatar } from '@/components/ui/avatar';
4import { Badge } from '@/components/ui/badge';
5import { Flex } from '@/components/ui/flex';
6import { Stack } from '@/components/ui/stack';
7
8const members = [
9  { initials: 'NB', name: 'Nadia Brenner', email: 'nadia@acmestudio.dev', role: 'Owner' },
10  { initials: 'TO', name: 'Tomas Ovalle', email: 'tomas@acmestudio.dev', role: 'Admin' },
11  { initials: 'RK', name: 'Rhea Kapoor', email: 'rhea@acmestudio.dev', role: 'Viewer' },
12];
13
14export function Secondary() {
15  return (
16    <Stack gap="4" className="border-border bg-card w-full max-w-md rounded-xl border p-4">
17      {members.map((member) => (
18        <Flex key={member.email} align="center" justify="between" gap="4">
19          <Flex align="center" gap="3" className="min-w-0">
20            <Avatar>
21              <Avatar.Fallback>{member.initials}</Avatar.Fallback>
22            </Avatar>
23            <div className="min-w-0">
24              <p className="truncate text-sm font-medium">{member.name}</p>
25              <p className="text-muted-foreground truncate text-xs">{member.email}</p>
26            </div>
27          </Flex>
28          <Badge variant="secondary">{member.role}</Badge>
29        </Flex>
30      ))}
31    </Stack>
32  );
33}

1import { Badge } from '@/components/ui/badge';
2import { Flex } from '@/components/ui/flex';
3import { Stack } from '@/components/ui/stack';
4
5const deploys = [
6  { branch: 'main', commit: '8f2c1a4', message: 'Bump checkout timeout', status: 'Failed' },
7  { branch: 'fix/webhooks', commit: '3ad9e07', message: 'Retry Stripe webhooks', status: 'Failed' },
8];
9
10export function Destructive() {
11  return (
12    <Stack gap="4" className="border-border bg-card w-full max-w-md rounded-xl border p-4">
13      {deploys.map((deploy) => (
14        <Flex key={deploy.commit} align="center" justify="between" gap="4">
15          <div className="min-w-0">
16            <p className="truncate text-sm font-medium">{deploy.message}</p>
17            <p className="text-muted-foreground truncate font-mono text-xs">
18              {deploy.branch} · {deploy.commit}
19            </p>
20          </div>
21          <Badge variant="destructive">{deploy.status}</Badge>
22        </Flex>
23      ))}
24    </Stack>
25  );
26}

1import { Badge } from '@/components/ui/badge';
2import { Flex } from '@/components/ui/flex';
3import { Stack } from '@/components/ui/stack';
4
5const tags = ['v2.4.0', 'node 22', 'eu-central-1'];
6
7export function Outline() {
8  return (
9    <Stack gap="3" className="border-border bg-card w-full max-w-sm rounded-xl border p-4">
10      <div>
11        <p className="text-sm font-medium">checkout-api</p>
12        <p className="text-muted-foreground mt-1 text-xs">Deployed Mar 14 at 09:41</p>
13      </div>
14      <Flex wrap="wrap" gap="2">
15        {tags.map((tag) => (
16          <Badge key={tag} variant="outline">
17            {tag}
18          </Badge>
19        ))}
20      </Flex>
21    </Stack>
22  );
23}

1import { Alert02Icon, Loading02Icon, Tick02Icon } from '@hugeicons/core-free-icons';
2import { HugeiconsIcon } from '@hugeicons/react';
3import { Badge } from '@/components/ui/badge';
4import { Flex } from '@/components/ui/flex';
5import { Stack } from '@/components/ui/stack';
6
7const checks = [
8  { name: 'Unit tests', detail: '412 passed in 38s', label: 'Passed', icon: Tick02Icon },
9  { name: 'Type check', detail: 'Running on node 22', label: 'Running', icon: Loading02Icon },
10  { name: 'Bundle size', detail: '+12kb over budget', label: 'Warning', icon: Alert02Icon },
11] as const;
12
13const variants = {
14  Passed: 'success',
15  Running: 'info',
16  Warning: 'warning',
17} as const;
18
19export function WithIcon() {
20  return (
21    <Stack gap="4" className="border-border bg-card w-full max-w-md rounded-xl border p-4">
22      {checks.map((check) => (
23        <Flex key={check.name} align="center" justify="between" gap="4">
24          <div className="min-w-0">
25            <p className="truncate text-sm font-medium">{check.name}</p>
26            <p className="text-muted-foreground truncate text-xs">{check.detail}</p>
27          </div>
28          <Badge variant={variants[check.label]}>
29            <HugeiconsIcon icon={check.icon} className="size-3" size={12} />
30            {check.label}
31          </Badge>
32        </Flex>
33      ))}
34    </Stack>
35  );
36}