Actions

Button

@xui/button

A clickable action. A directive rather than a component, so it styles a real <button> or <a> and keeps their semantics — including disabled, form submission and link navigation.

Install

pnpm add @xui/button

Add the barrel to a standalone component's imports:

import { XuiButtonImports } from '@xui/button';

@Component({
  imports: [XuiButtonImports],
  // …
})

Examples

Default

Loading preview…

<button xuiButton color="primary" variant="default" size="md">Click me!</button>

Dash

Loading preview…

<button xuiButton color="primary" variant="dash" size="md">Click me!</button>

Outline

Loading preview…

<button xuiButton color="primary" variant="outline" size="md">Click me!</button>

Ghost

Loading preview…

<button xuiButton color="primary" variant="ghost" size="md">Click me!</button>

Link

Loading preview…

<button xuiButton color="primary" variant="link" size="md">Click me!</button>

Small

Loading preview…

<button xuiButton color="primary" variant="default" size="sm">Click me!</button>

Large

Loading preview…

<button xuiButton color="primary" variant="default" size="lg">Click me!</button>

Colors

Loading preview…

<div class="flex gap-2">
  <button xuiButton color="primary" >Click me!</button>
  <button xuiButton color="secondary" >Click me!</button>
  <button xuiButton color="success" >Click me!</button>
  <button xuiButton color="error" >Click me!</button>
  <button xuiButton color="warning" >Click me!</button>
  <button xuiButton color="info" >Click me!</button>
</div>

<div class="flex gap-2 mt-2">
  <button xuiButton color="primary" variant="outline" >Click me!</button>
  <button xuiButton color="secondary" variant="outline" >Click me!</button>
  <button xuiButton color="success" variant="outline" >Click me!</button>
  <button xuiButton color="error" variant="outline" >Click me!</button>
  <button xuiButton color="warning" variant="outline" >Click me!</button>
  <button xuiButton color="info" variant="outline" >Click me!</button>
</div>

<div class="flex gap-2 mt-2">
  <button xuiButton color="primary" variant="dash" >Click me!</button>
  <button xuiButton color="secondary" variant="dash" >Click me!</button>
  <button xuiButton color="success" variant="dash" >Click me!</button>
  <button xuiButton color="error" variant="dash" >Click me!</button>
  <button xuiButton color="warning" variant="dash" >Click me!</button>
  <button xuiButton color="info" variant="dash" >Click me!</button>
</div>

Disabled

Loading preview…

<div class="flex gap-2">
  <button xuiButton disabled color="primary" >Click me!</button>
  <button xuiButton disabled color="secondary" >Click me!</button>
  <button xuiButton disabled color="success" >Click me!</button>
  <button xuiButton disabled color="error" >Click me!</button>
  <button xuiButton disabled color="warning" >Click me!</button>
  <button xuiButton disabled color="info" >Click me!</button>
</div>

<div class="flex gap-2 mt-2">
  <button xuiButton disabled color="primary" variant="outline" >Click me!</button>
  <button xuiButton disabled color="secondary" variant="outline" >Click me!</button>
  <button xuiButton disabled color="success" variant="outline" >Click me!</button>
  <button xuiButton disabled color="error" variant="outline" >Click me!</button>
  <button xuiButton disabled color="warning" variant="outline" >Click me!</button>
  <button xuiButton disabled color="info" variant="outline" >Click me!</button>
</div>

<div class="flex gap-2 mt-2">
  <button xuiButton disabled color="primary" variant="dash" >Click me!</button>
  <button xuiButton disabled color="secondary" variant="dash" >Click me!</button>
  <button xuiButton disabled color="success" variant="dash" >Click me!</button>
  <button xuiButton disabled color="error" variant="dash" >Click me!</button>
  <button xuiButton disabled color="warning" variant="dash" >Click me!</button>
  <button xuiButton disabled color="info" variant="dash" >Click me!</button>
</div>

Loading

Loading preview…

<div class="flex gap-3">
  <button xuiButton loading>Save changes</button>
  <button xuiButton loading variant="outline" color="success">Publish</button>
  <button xuiButton loading variant="ghost">Refresh</button>
</div>

Active

Loading preview…

<div class="flex gap-3">
  <button xuiButton active>Active</button>
  <button xuiButton variant="outline" active>Active outline</button>
</div>

Fill and align

Loading preview…

<div class="flex w-72 flex-col gap-2">
  <button xuiButton fill>Full width, centred</button>
  <button xuiButton fill alignText="left" variant="outline">Full width, left</button>
  <button xuiButton fill alignText="right" variant="outline">Full width, right</button>
</div>

Anchor

Loading preview…

<a xuiButton href="#" variant="outline">Anchor button</a>

API

XuiButton

directive

[xuiButton]

Turns a native <button> or <a> into an xUI button.

Variants

Axis

Options

Default

variant

default

dash

outline

ghost

link

default

size

md

color

primary

secondary

success

error

info

warning

primary

Inputs

Name

Type

Default

color

XuiButtonVariants['color']Intent colour. Pairs with variant to pick the concrete palette.

this.config.color

size

XuiButtonVariants['size']Control height, from the shared control scale. The gap and icon size scale with it.

this.config.size

variant

XuiButtonVariants['variant']How much the button asserts itself, from a filled default down to a bare link.

this.config.variant

class

ClassValueExtra classes, merged into the directive's own rather than replacing them.

''

fill

booleanStretch to fill the available width instead of hugging its contents.

false

alignText

XuiButtonAlignAlignment of the label/icons along the main axis. Defaults to centred.

'center'

active

booleanRender a pressed/selected appearance (also sets aria-pressed).

false

loading

booleanSwap the contents for a centred spinner while keeping the button's width, and block interaction. The label stays laid out (hidden) so the button never jumps.

false

Methods

setClass(classes: ClassValue): void

Source

libs/ui/button/xui