Trend Badge
A badge component for displaying trend indicators
+9.69%-4.36%
import { TrendBadge } from "@/components/sol/trend-badge";
export function TrendBadgeDemo() {
return (
<div className="flex items-center gap-3">
<TrendBadge>+9.69%</TrendBadge>
<TrendBadge trend="down">-4.36%</TrendBadge>
</div>
);
}Installation
pnpm dlx shadcn@latest add @solanaui/trend-badge
npx shadcn@latest add @solanaui/trend-badge
yarn dlx shadcn@latest add @solanaui/trend-badge
Usage
<TrendBadge>+9.69%</TrendBadge>
<TrendBadge trend="down">-4.36%</TrendBadge>Source Code
import { TrendingDownIcon, TrendingUpIcon } from "lucide-react";import type React from "react";import { Badge } from "@/components/ui/badge";import { cn } from "@/lib/utils";interface TrendBadgeProps extends React.ComponentProps<typeof Badge> { trend?: "up" | "down";}const TrendBadge = ({ trend = "up", children, className, ...props}: TrendBadgeProps) => { const isUp = trend === "up"; const Icon = isUp ? TrendingUpIcon : TrendingDownIcon; return ( <Badge className={cn( isUp ? "bg-emerald-500/15 text-emerald-500 border-emerald-500/25" : "bg-red-400/15 text-red-400 border-red-400/25", className, )} {...props} > <Icon className="size-3" /> {children && <span className="text-xs">{children}</span>} </Badge> );};export type { TrendBadgeProps };export { TrendBadge };