openstatus.dev
Openstatus
www.openstatus.dev
1import { cn } from "@/lib/utils";
2import { type VariantProps, cva } from "class-variance-authority";
3import type * as React from "react";
4
5const kbdVariants = cva(
6 "-me-1 ms-2 inline-flex h-5 max-h-full items-center rounded border px-1 font-[inherit] font-medium text-[0.625rem]",
7 {
8 variants: {
9 variant: {
10 default: "border-input bg-background text-muted-foreground/70",
11 secondary: "bg-secondary text-secondary-foreground",
12 ghost: "border-transparent",
13 },
14 },
15 defaultVariants: {
16 variant: "default",
17 },
18 },
19);
20
21export function Kbd({
22 children,
23 className,
24 variant,
25 ...props
26}: React.ComponentProps<"kbd"> & VariantProps<typeof kbdVariants>) {
27 return (
28 <kbd className={cn(kbdVariants({ variant, className }))} {...props}>
29 {children}
30 </kbd>
31 );
32}