CataUiButton

A versatile button component with various styles, sizes, and states to match your UI needs.

Button Types

Button with Icons

Button Sizes

Button States

Examples

Button Types

<CataUiButton type="primary" label="Primary" />
<CataUiButton type="secondary" label="Secondary" />
<CataUiButton type="tertiary" label="Tertiary" />
<CataUiButton type="delete" label="Delete" />
<CataUiButton type="destructive" label="Destructive" />
<CataUiButton type="transparent" label="Transparent" />

Button with Icons

<CataUiButton label="Left Icon" icon="bi-check" />
<CataUiButton label="Right Icon" iconRight="bi-arrow-right" />
<CataUiButton icon="bi-gear" />

Button Sizes

<CataUiButton size="small" label="Small Button" />
<CataUiButton size="large" label="Large Button" />

Button States

<CataUiButton label="Loading" loading />
<CataUiButton label="Disabled" disabled />

Props

Prop	Description	Type	Default	Required	Options
disabled	Disables the button, preventing user interaction	Boolean	false	false
icon	The icon to display on the left side of the button label (see Icons)	String	''	false	Any valid icon name
iconRight	The icon to display on the right side of the button label (see Icons)	String	''	false	Any valid icon name
label	The text to display inside the button	String	''	false
loading	Shows a loading spinner and disables the button when true	Boolean	false	false
size	Controls the size of the button	String	'large'	false	'small', 'large'
type	The visual style of the button	String	'primary'	false	'primary', 'secondary', 'tertiary', 'delete', 'destructive', 'transparent'