Components / Button

Button

Displays a button or a button-styled control, with variants and sizes. Pure Tailwind on the brain's attribute seam; no behaviour required.

Quick reference

Parameter	Values
Variant	default · secondary · destructive · outline · ghost · link
Size	default · sm · lg · icon
Disabled	true · false
OnClick	EventCallback<MouseEventArgs>

Examples

Set Variant to change the visual style. The default is a solid primary button.

razor

<ZitsButton>Default</ZitsButton>
<ZitsButton Variant="secondary">Secondary</ZitsButton>
<ZitsButton Variant="destructive">Destructive</ZitsButton>
<ZitsButton Variant="outline">Outline</ZitsButton>
<ZitsButton Variant="ghost">Ghost</ZitsButton>
<ZitsButton Variant="link">Link</ZitsButton>

Sizes

Use Size for sm, lg, or a square icon button.

razor

<ZitsButton Size="sm">Small</ZitsButton>
<ZitsButton Size="default">Default</ZitsButton>
<ZitsButton Size="lg">Large</ZitsButton>

Installation

Copy the component source into your project with the CLI.

Terminal bash

navius add button --to ./src/MyApp --namespace MyApp.Ui

API reference

Prop	Type	Default
Variant	string	"default"
Size	string	"default"
Disabled	bool	false
OnClick	EventCallback<MouseEventArgs>	-