A thin engraved divider line used to separate groups of controls or content, such as toolbar buttons or footer keys.
import { Rule } from "@/components/ui/rule";
export default function RuleDemo() {
return (
<div className="flex h-screen w-full items-center justify-center bg-[#1b1b1d]">
<div className="flex items-center gap-2 rounded-2xl bg-gradient-to-b from-[#303033] to-[#262628] px-3 py-2 shadow-[inset_0_1px_0_rgba(255,255,255,.09),inset_0_-1px_0_rgba(0,0,0,.3),0_0_0_0.5px_rgba(0,0,0,.8),0_1px_1px_rgba(0,0,0,.35),0_2px_4px_-1px_rgba(0,0,0,.25)]">
<button className="flex h-9 w-9 items-center justify-center rounded-lg text-[13px] text-[#d6d6d8] hover:bg-white/10">
A
</button>
<Rule orientation="vertical" tone="graphite" className="h-6" />
<button className="flex h-9 w-9 items-center justify-center rounded-lg text-[13px] text-[#d6d6d8] hover:bg-white/10">
B
</button>
<Rule orientation="vertical" tone="graphite" className="h-6" />
<button className="flex h-9 w-9 items-center justify-center rounded-lg text-[13px] text-[#d6d6d8] hover:bg-white/10">
C
</button>
<Rule orientation="vertical" tone="graphite" className="h-6" />
<button className="flex h-9 w-9 items-center justify-center rounded-lg text-[13px] text-[#d6d6d8] hover:bg-white/10">
D
</button>
</div>
</div>
);
}