Forms & Inputs

Button

The action button system. Designed for ERP workflows: every action (create, save, edit, delete, print, send, download, refresh) has its own semantic variant with appropriate colors and icons.

Import

import { Button } from 'indas-ui'

Action buttons

Recommended

These are the workhorse variants. Each carries semantic color, optional auto-icon, and consistent sizing. On mobile, they collapse to icon-only with the label as tooltip.

Variant	Color	When to use
action-create	Primary (brand)	Add a new record (user, item, ledger…)
action-save	Success (green)	Commit changes to the database
action-save-as	Sky	Clone the current record with new identifiers
action-edit	Warning (amber)	Switch a row to editable mode
action-delete	Error (red)	Destructive delete operation
action-print	Purple	Generate a printable PDF or send to printer
action-send	Info (blue)	Send a quotation, invoice, or notification
action-mail	Error (red)	Send an email with attachment
action-download	Success (green)	Download CSV/Excel/PDF export
action-refresh	Neutral	Re-fetch data from server
action-apply	Teal (auto-icon: ✓)	Apply filter, settings, or selection
action-cancel	Neutral (auto-icon: ✗)	Cancel current modal or operation
action-back	Neutral	Navigate to previous step
action-secondary	Neutral	Secondary actions in toolbars

Companion components

Three button variants exported alongside Button for specific use cases.

CheckboxButton

Toggle button styled like a checkbox. Common in toolbars (e.g. 'Set First Plan as Master').

InputButton

Inline number input inside a bordered button. Optional stepper (+/−).

FilterPillButton

Status filter pill with a count badge. Used for grid/list status tabs.

Generic variants

Standard variants for non-action use cases (form submits, hero CTAs, modal footers). Prefer action variants when the intent is semantic.

Sizes

States

Props

Prop	Type	Default
variant	'primary' \| 'secondary' \| 'outline' \| 'ghost' \| 'destructive' \| 'action-*' (14 variants)	'primary'
size	'xs' \| 'sm' \| 'md' \| 'lg' \| 'footer'	'md'
icon	LucideIcon \| ReactNode	—
iconPosition	'left' \| 'right'	'left'
iconOnly	boolean	false
loading	boolean	false
fab	boolean	false
tooltip	string	—