iconreq- Type
LucideIcon- Default
- -
- Description
- Rendered glyph inside the round/box action outline.
Components / Actions
Icon Button
சின்ன பொத்தான்
Icon buttons are square buttons that contain only an icon. Always pair them with a tooltip so the action is accessible to keyboard and screen reader users.
சின்ன பொத்தான்கள் ஒரு சின்னம் மட்டும் கொண்ட சதுர பொத்தான்கள். எப்போதும் குறிப்பு நுனியுடன் இணைக்கவும்.
Variants
Component preview
Icon button variantsசின்ன பொத்தான் வடிவங்கள்Sizes
Component preview
Icon button sizesசின்ன பொத்தான் அளவுகள்Structure
Anatomy
3 parts documented for implementation and review.
1
Button
பொத்தான்required<button>Square button container with equal width and height (size-9 default = 36x36px). Uses rounded-md with the same variant system as Button. Must include aria-label since there is no visible text.
2
Icon
சின்னம்requiredsvgCentered Lucide SVG icon. Default h-4 w-4 (16px), sm: h-3 w-3 (12px), lg: h-5 w-5 (20px). The icon IS the entire button content — must be semantically meaningful.
3
Tooltip
குறிப்பு நுனிrequiredRequired aria-label string providing accessible name for screen readers and keyboard users. Should describe the action, not the icon — use Dismiss not X, Save not Floppy disk.
Accessibility requirement
- Always add
aria-labelin Tamil (or Tamil/English) to every icon button. - Always wrap with
Tooltip— icon-only buttons are invisible to sighted users who don't hover. - The
aria-labelandTooltipContenttext must match.
API
Props
variant- Type
"default" | "outline" | "ghost"- Default
"default"- Description
- Border style.
| Prop | Type | Default | Description |
|---|---|---|---|
iconreq | LucideIcon | - | Rendered glyph inside the round/box action outline. |
variant | "default" | "outline" | "ghost" | "default" | Border style. |
Best practices
Always provide aria-label on icon-only buttons
சின்ன மட்டும் உள்ள பொத்தான்களில் எப்போதும் aria-label வழங்கவும்
Screen reader users and keyboard navigators rely on aria-label to understand what the button does.
திரை வாசகர் பயனர்கள் பொத்தான் என்ன செய்கிறது என்று புரிய aria-label தேவை.
Don't use icon-only buttons for primary CTAs
முதன்மை CTA பொத்தான்களை சின்னம் மட்டும் வடிவத்தில் காட்டாதே
Primary calls-to-action must have visible text labels — icons alone are ambiguous and reduce discoverability.
முதன்மை செயல் பொத்தான்களுக்கு தெரியும் உரை லேபிள் வேண்டும் — சின்னம் மட்டும் பொருளை தெளிவாக காட்டாது.
Use size='icon' for square proportions
சதுர விகிதத்திற்கு size='icon' பயன்படுத்தவும்
The size='icon' variant ensures equal width and height so the icon is properly centered within the button.
size='icon' சம அகலம் மற்றும் உயரத்தை உறுதி செய்கிறது, சின்னம் சரியாக மையப்படுத்தப்படும்.
Don't put multiple icons inside one icon button
ஒரு சின்ன பொத்தானில் இரண்டு சின்னங்கள் வைக்காதே
An icon button should contain exactly one icon — multiple icons create layout issues and confuse the action.
ஒரு சின்ன பொத்தானில் ஒரு சின்னம் மட்டுமே — இரண்டு சின்னங்கள் வடிவமைப்பை சிதைக்கும்.