Badge

1. 1
2. 2
3. 3
4. 4
5. 5

import { Badge } from "@gunkin/uiify";

export default function Example() {
  return <Badge className="">Ready</Badge>;
}

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24
25. 25
26. 26
27. 27
28. 28
29. 29
30. 30
31. 31
32. 32
33. 33
34. 34
35. 35
36. 36
37. 37
38. 38
39. 39
40. 40
41. 41
42. 42
43. 43
44. 44
45. 45
46. 46

@layer components {
  [data-uiify-badge] {
    display: inline-flex;
    align-items: center;
    padding-block: 0.25rem;
    padding-inline: 0.625rem;
    border-radius: var(--radius-full);
    background: var(--secondary);
    color: var(--secondary-foreground);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    line-height: 1.25;
  }

  [data-uiify-badge][data-size="sm"] {
    padding-block: 0.125rem;
    padding-inline: 0.5rem;
    font-size: var(--text-xs);
  }

  [data-uiify-badge][data-size="md"] {
    padding-block: 0.25rem;
    padding-inline: 0.625rem;
  }

  [data-uiify-badge][data-size="lg"] {
    padding-block: 0.375rem;
    padding-inline: 0.75rem;
    font-size: var(--text-base);
  }

  [data-uiify-badge][data-variant="success"] {
    background: color-mix(in oklch, var(--success) 16%, var(--background));
    color: var(--foreground);
  }

  [data-uiify-badge][data-variant="warning"] {
    background: color-mix(in oklch, var(--warning) 16%, var(--background));
    color: var(--foreground);
  }

  [data-uiify-badge][data-variant="destructive"] {
    background: color-mix(in oklch, var(--destructive) 12%, var(--background));
    color: var(--foreground);
  }
}

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23

import { Badge } from "@gunkin/uiify";

export default function Example() {
  return (
    <Badge
      className="
        inline-flex items-center [padding-block:0.25rem] [padding-inline:0.625rem] rounded-[var(--radius-full)]
        bg-secondary text-secondary-foreground text-sm font-[number:var(--weight-medium)] [line-height:1.25]
        data-[size=sm]:[padding-block:0.125rem] data-[size=sm]:[padding-inline:0.5rem] data-[size=sm]:text-xs
        data-[size=md]:[padding-block:0.25rem] data-[size=md]:[padding-inline:0.625rem]
        data-[size=lg]:[padding-block:0.375rem] data-[size=lg]:[padding-inline:0.75rem] data-[size=lg]:text-base
        data-[variant=success]:[background:color-mix(in_oklch,_var(--success)_16%,_var(--background))]
        data-[variant=success]:text-foreground
        data-[variant=warning]:[background:color-mix(in_oklch,_var(--warning)_16%,_var(--background))]
        data-[variant=warning]:text-foreground
        data-[variant=destructive]:[background:color-mix(in_oklch,_var(--destructive)_12%,_var(--background))]
        data-[variant=destructive]:text-foreground
      "
    >
      Ready
    </Badge>
  );
}