Button

Overview

Button renders NaviusButton, the headless primitive that owns click behavior, the disabled state, and FocusableWhenDisabled, and layers a cva-style Variant/Size class set on top. The consumer’s own class is merged in last through Cn.Merge, so overrides win over the preset.

Install

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

Usage

@using Zits.Ui.Components

<ZitsButton Variant="destructive" Size="sm" OnClick="Delete">
    Delete
</ZitsButton>

Parts and props

Button is a single control with no part tree. ChildContent, Type, Disabled, FocusableWhenDisabled, OnClick, and Attributes pass through to NaviusButton unchanged. The styled wrapper adds:

Prop	Type	Default	Description
`Variant`	`string`	`"default"`	One of `default`, `destructive`, `outline`, `secondary`, `ghost`, `link`. Selects the Tailwind class set.
`Size`	`string`	`"default"`	One of `default`, `sm`, `lg`, `icon`, `icon-sm`, `icon-xs`. Selects the Tailwind class set.

Styling surface

Attributes on ZitsButton is forwarded to the rendered button and merged with the Variant/Size class set via Cn.Merge, with the caller’s classes applied last.

Parameter	Values
`Variant`	`default` · `destructive` · `outline` · `secondary` · `ghost` · `link`
`Size`	`default` · `sm` · `lg` · `icon` · `icon-sm` · `icon-xs`

Data attribute hooks

Part	Attribute	Description
Root	`data-disabled`	Present when `Disabled` is true, emitted by the composed `NaviusButton` primitive.

Underlying primitives

NaviusButton (source; manifest not yet published)