Components
Navigation link for use within text that respects line breaks and text flow. Works with both href and onClick (rendering an anchor or button tag), offers underline and plain variants, primary/positive/critical/warning/inherit colors, a disabled state and an optional icon for standalone usage.
npx @21st-dev/cli add reshaped/reshaped-linkLoading preview...
import { Reshaped } from "reshaped/bundle";
import Link from "@/components/ui/reshaped-link";
const ActivityIcon = () => (
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />
</svg>
);
export default function Demo() {
return (
<Reshaped theme="slate">
<div style={{ margin: "0 auto", padding: 24, display: "flex", justifyContent: "center" }}>
<Link icon={ActivityIcon} variant="plain" onClick={() => {}}>
Link with an icon
</Link>
</div>
</Reshaped>
);
}
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...