Button

A themed button/link primitive with semantic colors, icon composition, tooltips, and loading presentation.

Interactive live playground

Tweak props, change states, and see the live component respond in real time.

Live

How to call

Import directly from the Loomora package root. For projects without Tailwind CSS, ensure loomora/dist/index.css is imported once in your root layout.

import { Button } from 'loomora'

<Button color="info" variant="fill" onClick={() => setClicked(true)}>
  Save changes
</Button>

API reference

Important public props and how they affect rendering.

7 props

Prop	Type	Default	Description
variant	'fill' \| 'outline' \| 'text' \| 'none'	'fill'	Visual treatment for the action.
color	semantic color	config default	Theme color token such as info, primary, success, or second.
size	tiny … extreme \| none	'default'	Size preset from shared configuration.
loading	boolean	false	Replaces regular content with loader content; does not disable the button.
href	string	—	Renders a navigation link instead of a native button.
onClick	MouseEvent handler	—	Action handler for buttons and links.
condition	boolean	true	Returns null when false.

← All components map Back to live example ↑