ドキュメント
Badge
Badge
バッジ、またはバッジのような外観のコンポーネントを表示します。
import { Badge } from "@repo/tailwindcss/ui/badge";
const BadgeDemo = () => {
return <Badge>Badge</Badge>;
};
export default BadgeDemo;インストール
npx shadcn-solid@latest add badge以下のコードをプロジェクトにコピー＆ペーストします
import { cn } from "@/libs/cn";
import type { VariantProps } from "class-variance-authority";
import { cva } from "class-variance-authority";
import { type ComponentProps, splitProps } from "solid-js";
export const badgeVariants = cva(
"inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-shadow focus-visible:outline-none focus-visible:ring-[1.5px] focus-visible:ring-ring",
{
variants: {
variant: {
default:
"border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
secondary:
"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
destructive:
"border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
outline: "text-foreground",
},
},
defaultVariants: {
variant: "default",
},
},
);
export const Badge = (
props: ComponentProps<"div"> & VariantProps<typeof badgeVariants>,
) => {
const [local, rest] = splitProps(props, ["class", "variant"]);
return (
<div
class={cn(
badgeVariants({
variant: local.variant,
}),
local.class,
)}
{...rest}
/>
);
};以下のコードをプロジェクトにコピー＆ペーストします
import { cn } from "@/libs/cn";
import type { VariantProps } from "class-variance-authority";
import { cva } from "class-variance-authority";
import { type ComponentProps, splitProps } from "solid-js";
export const badgeVariants = cva(
"inline-flex items-center rounded-md px-2.5 py-0.5 text-xs font-semibold transition-shadow focus-visible:(outline-none ring-1.5 ring-ring)",
{
variants: {
variant: {
default:
"bg-primary text-primary-foreground shadow hover:bg-primary/80",
secondary:
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
destructive:
"bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
outline: "border text-foreground",
},
},
defaultVariants: {
variant: "default",
},
},
);
export const Badge = (
props: ComponentProps<"div"> & VariantProps<typeof badgeVariants>,
) => {
const [local, rest] = splitProps(props, ["class", "variant"]);
return (
<div
class={cn(
badgeVariants({
variant: local.variant,
}),
local.class,
)}
{...rest}
/>
);
};使用方法
import { Badge } from "@/components/ui/badge";<Badge variant="outline">badge</Badge>リンク
badgeVariantsヘルパーを使用して、バッジのように見えるリンクを作成できます。
import { badgeVariants } from "@/components/ui/badge";<A class={badgeVariants({ variant: "outline" })}>Click here</A>または、asChild パラメータを設定し、リンクコンポーネントをネストすることもできます。
<Badge asChild>
<As component={A} href="#">
Login
</As>
</Badge>使用例
セカンダリ
import { Badge } from "@repo/tailwindcss/ui/badge";
const BadgeSecondary = () => {
return <Badge variant="secondary">Secondary</Badge>;
};
export default BadgeSecondary;破壊的
import { Badge } from "@repo/tailwindcss/ui/badge";
const BadgeDestructive = () => {
return <Badge variant="destructive">Destructive</Badge>;
};
export default BadgeDestructive;アウトライン
import { Badge } from "@repo/tailwindcss/ui/badge";
const BadgeOutline = () => {
return <Badge variant="outline">Outline</Badge>;
};
export default BadgeOutline;