Skip to content

Button

A clean button component with four variants: default, primary, accent, and ghost.

Usage

html
<tx-button>Default</tx-button>
<tx-button variant="primary">Primary</tx-button>
<tx-button variant="accent">Accent</tx-button>
<tx-button variant="ghost">Ghost</tx-button>

<tx-button size="sm">Small</tx-button>
<tx-button size="lg">Large</tx-button>
<tx-button pill variant="primary">Pill</tx-button>
<tx-button icon-only variant="accent">+</tx-button>

Properties

PropertyTypeDefaultDescription
variant'default' | 'primary' | 'accent' | 'ghost''default'Visual style
size'sm' | 'md' | 'lg''md'Button size
disabledbooleanfalseDisables the button
pillbooleanfalseFully rounded border radius
iconOnlybooleanfalseCircular icon-only layout

CSS Parts

PartDescription
buttonThe native button

Slots

SlotDescription
(default)Button label / icon content

Live Demo

Variants

DefaultPrimaryAccentGhostDisabled

Sizes

SmallMediumLargePill