@agala-labs/ui

Button

Triggers an action or submits a form.

Examples

Choose emphasis from the consequence and frequency of the action.

Variants

<AgalaButton icon="plus">Create project</AgalaButton>
<AgalaButton variant="secondary">Secondary</AgalaButton>
<AgalaButton variant="outline">Outline</AgalaButton>
<AgalaButton variant="danger">Delete</AgalaButton>

Import

import { AgalaButton } from '@agala-labs/ui'

API

Prop	Type	Default	Description
variant	'default' | 'secondary' | 'outline' | 'ghost' | 'danger' | 'link'	'default'	Visual emphasis.
size	'sm' | 'md' | 'lg' | 'icon'	'md'	Control size.
type	'button' | 'submit' | 'reset'	'button'	Native button type.
loading	boolean	false	Shows progress and prevents repeated activation.
block	boolean	false	Fills the available width.
icon	string	—	Leading Agala icon name.
disabled	boolean	false	Disables interaction.
class	string	—	Consumer override class.

Slots

• default — button label

Accessibility

Uses a native button. Loading and disabled states prevent activation; icon-only buttons need an accessible name.

Semantic danger actions

Use variant="danger" for destructive actions instead of overriding foreground or background colors. Named themes own the semantic pair; Kervo uses a deep red surface with white text so the normal and hover states retain AA contrast.