Docs
Icon Button
Icon Button
Displays a button or a component that looks like a button with an icon.
import * as React from "react";
import { ArrowRightIcon } from "lucide-react";
import { IconButton } from "@/components/ui/icon-button";
export function IconButtonExample(): React.JSX.Element {
return (
<IconButton>
<ArrowRightIcon />
</IconButton>
);
}Installation
npx lotru@latest add ui/icon-buttonUsage
import { IconButton } from "@/components/ui/icon-button";<IconButton>
<ChevronRightIcon />
</IconButton>Examples
With a different variant
import * as React from "react";
import { ArrowRightIcon } from "lucide-react";
import { IconButton } from "@/components/ui/icon-button";
import { Stack } from "@/components/ui/stack";
export function IconButtonExample(): React.JSX.Element {
return (
<Stack direction="row" gap={4} flexWrap="wrap">
<IconButton variant="solid">
<ArrowRightIcon />
</IconButton>
<IconButton variant="outline">
<ArrowRightIcon />
</IconButton>
<IconButton variant="ghost">
<ArrowRightIcon />
</IconButton>
<IconButton disabled>
<ArrowRightIcon />
</IconButton>
</Stack>
);
}