Get started
Data display
Data entry
General
Layout
Navigation
Blocks
Packages
A label whose icon stands in for a field's text in a dense panel, tied to its control through htmlFor and sizing an unclassed child svg to a compact glyph.
tsx
1
2
3import { Blend } from 'lucide-react';
import type { ReactNode } from 'react';
Installation#
bash
pnpm dlx shadcn@latest add https://ui.zeroxsolutions.com/r/icon-label.jsonUsage#
tsx
import { IconLabel } from '@/components/general/icon-label';tsx
<Tooltip>
<TooltipTrigger render={<IconLabel htmlFor="rotation" />}>
<RotateCw aria-hidden />
<span className="sr-only">Rotation</span>
</TooltipTrigger>
<TooltipContent>Rotation</TooltipContent>
</Tooltip>
<Input id="rotation" type="number" />Use it to stand in for a field's own text label in a dense panel. For a glyph that carries no field of its own, such as a model ability, use Icon Media instead.
API reference#
IconLabel#
Renders a label and takes every prop a label takes. An svg child with no size-* class of its own
is drawn at size-3. It sets data-slot="icon-label".