variant- Type
"primary" | "surface" | "secondary"- Default
"primary"- Description
- Semantic styling variants.
Components / Actions
Floating Action Button (FAB)
மிதக்கும் செயல் பொத்தான்
FAB represents the primary, most common action on a screen. It floats above other content, anchoring the screen's main workflow.
திரையின் மிக முக்கியமான முதன்மைச் செயலைக் குறிக்கும் மிதக்கும் பொத்தான்.
FAB Sizes
FABs are available in small (40px), standard (56px), large (96px), and extended (auto-width with text) forms.
Component preview
FAB sizesமிதக்கும் பொத்தான் அளவுகள்Variant Colors
Three semantic color variants: primary (brand), secondary (subtle), and surface (outlined card).
Component preview
FAB color variantsநிற வகைகள்Disabled State
Disabled FABs are visually muted and unclickable. Use sparingly — prefer hiding the FAB entirely when the action is unavailable.
Component preview
Disabled FABமுடக்கப்பட்ட FABAnatomy
Structure
Anatomy
3 parts documented for implementation and review.
1
Container
பொத்தான் கொள்கலன்required<button>Slightly rounded-md shape with elevation levels shadow-md/shadow-lg. Mapped to state overlay parameters for focus ring and active transition behaviors.
2
Icon
சின்னம்requiredAn icon clarifying the primary action, scaled to the containing FAB size (20px, 24px, 36px). Wrapped in aria-hidden span so assistive tech reads the aria-label instead.
3
Label (Extended only)
விளக்க உரைText description rendered on extended FABs. Fully supports Tamil script with proper vertical margin padding to avoid line clipping.
Props
API
Props
size- Type
"small" | "default" | "large" | "extended"- Default
"default"- Description
- Dimensions and text layouts.
icon- Type
React.ReactNode- Default
- -
- Description
- Standard vector icon element.
aria-label- Type
string- Default
- -
- Description
- Required for icon-only sizes. Provides accessible name for screen readers.
disabled- Type
boolean- Default
false- Description
- Disables the FAB with muted styling.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "primary" | "surface" | "secondary" | "primary" | Semantic styling variants. |
size | "small" | "default" | "large" | "extended" | "default" | Dimensions and text layouts. |
icon | React.ReactNode | - | Standard vector icon element. |
aria-label | string | - | Required for icon-only sizes. Provides accessible name for screen readers. |
disabled | boolean | false | Disables the FAB with muted styling. |
Usage guidance
- Limit Count: Never place more than one FAB on a single screen layout. FAB represents the single primary action.
- Positioning: Place the FAB at the bottom-right corner of the layout, standard 24px (1.5rem) away from the viewport borders.
- Do Not Hide Content: Ensure scrolling content has enough bottom margin padding (
pb-24) so the floating action doesn't obscure grid cells or important items. - aria-label Required: All icon-only FABs (small, default, large) must have an
aria-labeldescribing the action.
Accessibility
- Renders a native
<button>— focusable and activatable with Enter and Space. - Icon-only FABs require
aria-labelto provide an accessible name. The icon is markedaria-hiddento avoid redundant announcements. - Disabled state uses native
disabledattribute, removing the FAB from tab order automatically. - Focus ring uses
ring-2 ring-ring ring-offset-2for clear keyboard-navigation visibility. - Extended FABs derive their accessible name from the visible text label — no extra
aria-labelneeded.
Best practices
Use FAB for a single, screen-defining primary action
திரையின் முக்கிய செயலுக்கு மட்டுமே மிதக்கும் பொத்தானைப் பயன்படுத்தவும்
Use FAB to create a new item, send a message, or compile a report on a primary content dashboard.
புதிய பதிவு எழுத அல்லது செய்தி அனுப்ப மிதக்கும் பொத்தானைப் பயன்படுத்துங்கள்.
Don't use multiple FABs or secondary actions as FABs
ஒரே திரையில் பல மிதக்கும் பொத்தான்களை வைக்காதே
Multiple FABs create visual noise and destroy action hierarchy. Use standard buttons for secondary options.
ஒரே திரையில் பல மிதக்கும் பொத்தான்கள் வைப்பது பயனரை குழப்பமடையச் செய்யும்.
Use extended FAB on large screens for clarity
பெரிய திரைகளில் தெளிவுக்காக விரிவாக்கப்பட்ட FAB பயன்படுத்தவும்
On tablet and desktop screens, use extended FABs with text labels so the action is immediately obvious without needing to hover.
மாத்திரை மற்றும் கணினி திரைகளில் உரையுடன் கூடிய FAB பயன்படுத்தி செயலை உடனடியாகத் தெளிவுபடுத்தவும்.
Don't use FAB for destructive actions
அழிவுகரமான செயல்களுக்கு FAB பயன்படுத்தாதே
Destructive actions like delete or remove should never be the primary screen action. Use a destructive Button inside a confirmation dialog instead.
நீக்குதல் போன்ற அழிவுகரமான செயல்களுக்கு FAB பயன்படுத்த வேண்டாம் — உறுதிப்படுத்தல் உரையாடலில் அழிவுகரமான பொத்தானைப் பயன்படுத்தவும்.