<tyro-ui-button>

Button

Dashboard button with 4 variants: classic, lite (with gloss directives), gradient and ghost. Supports icons, 3 sizes and an optional click event.

Classic

Solid blue, white hover glow

Lite

Neutral, with gloss + border glow on hover

Gradient

Brand gradient, white shimmer on hover

Ghost

No background, no border - text only

Inputs

Property	Type	Default	Description
`[variant]`	`'classic' \| 'lite' \| 'gradient' \| 'ghost'`	`'classic'`	Visual style of the button
`[size]`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size of the button
`[icon]`	`string`	`-`	Remix Icon class displayed to the left of the label
`[iconRight]`	`string`	`-`	Remix Icon class displayed to the right of the label
`[disabled]`	`boolean`	`false`	Disables the button (reduced opacity, not-allowed cursor)
`[type]`	`'button' \| 'submit' \| 'reset'`	`'button'`	HTML type attribute of the native button

Outputs

Event	Payload	Description
`(clicked)`	`void`	Emitted on click (ignored when disabled)

Usage

<!-- Classic -->
<tyro-ui-button variant="classic" icon="ri-add-line" (clicked)="onCreate()">
  Create
</tyro-ui-button>

<!-- Lite (gloss + border glow) -->
<tyro-ui-button variant="lite" icon="ri-filter-line">
  Filters
</tyro-ui-button>

<!-- Gradient -->
<tyro-ui-button variant="gradient" size="lg" iconRight="ri-arrow-right-line">
  Get started
</tyro-ui-button>

<!-- Ghost -->
<tyro-ui-button variant="ghost" [disabled]="isLoading">
  Cancel
</tyro-ui-button>