Command Palette

Search for a command to run...

Components / Actions

Button

பொத்தான்

Buttons initiate actions, submit forms, or navigate between pages. Tamil DS buttons use clear hierarchy, steady spacing, visible focus states, and restrained tactile feedback.

பொத்தான்கள் செயல்களைத் தொடங்குகின்றன, படிவங்களை சமர்ப்பிக்கின்றன, அல்லது பக்கங்களுக்கிடையில் வழிசெலுத்துகின்றன.

Variants

Component preview
All variantsஅனைத்து வடிவங்கள்

Sizes

Component preview
Sizesஅளவுகள்

With icons

Component preview
Icon buttonsசின்னத்துடன் பொத்தான்

Loading state

Component preview
Loadingஏற்றுகிறது

Anatomy

Structure

Anatomy

5 parts documented for implementation and review.

Component map
1

Container

கொள்கலன்required<button>

The root interactive element. Renders as a native <button> for form submission and keyboard support. Sets min-height of 40px (h-10) for the default size to meet WCAG touch-target guidelines. Applies border-radius via rounded-md, and carries the variant background/border colors.

2

Label

லேபிள்required

Primary text content rendered as an inline child. Should be concise and action-oriented — prefer 'Save draft' over 'Click here'. Font weight is medium (500) at 14px. For Tamil labels, add the font-tamil class to ensure correct glyph rendering and line-height.

3

Leading icon

முன்னணி சின்னம்svg

Optional icon placed before the label via children ordering. Sized at 16×16px (h-4 w-4) by default. Use for semantic reinforcement — a download icon before 'Download', a mail icon before 'Send'. Do not use decorative icons that don't clarify the action.

4

Trailing icon

பின்னணி சின்னம்svg

Optional icon placed after the label. Common for directional hints (ArrowRight for navigation, ChevronDown for dropdowns). Same 16×16px sizing. For icon-only buttons, use the 'icon' size variant and provide an aria-label.

5

Focus ring

கவனம் வளையம்required

A 2px brand-coloured outline that appears on keyboard focus (:focus-visible). Offset by 2px from the button edge. Uses the --ring token color. Never suppress this — it is the primary keyboard-navigation indicator for sighted users.

Props

API

Props

5 props
variant
Type
"default" | "secondary" | "outline" | "ghost" | "link" | "destructive"
Default
"default"
Description
Visual hierarchy of the action.
size
Type
"xs" | "sm" | "default" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg"
Default
"default"
Description
Size of the button. Icon sizes produce square buttons for icon-only use.
disabled
Type
boolean
Default
false
Description
Prevents interaction and applies disabled styling.
className
Type
string
Default
-
Description
Additional Tailwind classes to merge.
...props
Type
React.ButtonHTMLAttributes
Default
-
Description
All native button attributes are forwarded.

Best practices

Use concise action verbs
சுருக்கமான வினைச்சொற்களைப் பயன்படுத்தவும்

Label buttons with clear, action-oriented verbs. The user should know exactly what will happen.

பொத்தான்களுக்கு தெளிவான, செயல் சார்ந்த சொற்களைப் பயன்படுத்தவும். என்ன நடக்கும் என்று பயனர் துல்லியமாக அறிய வேண்டும்.

Don't use vague labels
பொதுவான சொற்களைத் தவிர்க்கவும்

Avoid generic terms like 'Click here', 'Submit', or overly long conversational sentences.

'இங்கே கிளிக் செய்யவும்', 'சமர்ப்பிக்கவும்' போன்ற பொதுவான சொற்களை அல்லது மிக நீண்ட உரையாடல் வாக்கியங்களைத் தவிர்க்கவும்.

Use destructive variant for irreversible actions
மாற்ற முடியாத செயல்களுக்கு சிவப்பு நிறம் பயன்படுத்தவும்

Use the destructive variant for actions that delete data or have severe consequences.

தரவை நீக்கும் அல்லது கடுமையான விளைவுகளைக் கொண்ட செயல்களுக்கு அழிவுகரமான (அழித்தல்) வடிவத்தைப் பயன்படுத்தவும்.

Don't use destructive for secondary actions
இரண்டாம் நிலை செயல்களுக்குப் பயன்படுத்த வேண்டாம்

Do not use destructive buttons for 'Cancel' or 'Go back'. Use ghost or outline instead.

'ரத்துசெய்' அல்லது 'பின்செல்' போன்ற செயல்களுக்கு அழித்தல் பொத்தான்களைப் பயன்படுத்த வேண்டாம். அதற்குப் பதிலாக கோஸ்ட் அல்லது அவுட்லைன் பயன்படுத்தவும்.

Accessibility

  • Renders a native <button> — focusable and activatable with Enter and Space.
  • Disabled state uses native disabled attribute, removing it from tab order.
  • Icon-only buttons (size="icon") require aria-label.
  • Minimum 44×44px touch target on all sizes.