Button

<ts-button> vv0.4.0

The ts-button component.

Open in Storybook for interactive demos.

Preview

<ts-button appearance="solid" size="md" variant="primary">Content</ts-button>

Properties

Property	Attribute	Type	Default	Description
appearance	appearance	"ghost" | "link" | "outline" | "solid"	'solid'	The button’s visual weight / appearance.
block	block	boolean	false	Makes the button take the full width of its container.
disabled	disabled	boolean	false	Renders the button in a disabled state.
href	href	string | undefined	—	An optional href — renders an anchor instead of a button.
loading	loading	boolean	false	Renders a loading spinner and disables the button.
size	size	"lg" | "md" | "sm" | "xl" | "xs"	'md'	The button’s size.
target	target	"_blank" | "_parent" | "_self" | "_top" | undefined	—	Target attribute when href is set.
type	type	"button" | "reset" | "submit"	'button'	The type attribute for the native button.
variant	variant	"danger" | "info" | "neutral" | "primary" | "secondary" | "success" | "warning"	'primary'	The button’s visual variant.

Events

Event	Detail	Bubbles	Composed	Description
tsBlur	void	Yes	Yes	Emitted when the button loses focus.
tsClick	void	Yes	Yes	Emitted when the button is clicked (not fired when disabled/loading).
tsFocus	void	Yes	Yes	Emitted when the button receives focus.

Slots

Name	Description
*(default)*	Default slot for button label content.
prefix	Content before the label (e.g., icon).
suffix	Content after the label (e.g., icon).

CSS Parts

Use ::part() to style internal elements:

Part	Description
base	The native button element.
label	The label wrapper.
prefix	The prefix slot wrapper.
spinner	The loading spinner element.
suffix	The suffix slot wrapper.

ts-button::part(base) {
  /* your custom styles */
}

Usage

HTML

<ts-button appearance="solid" size="md" variant="primary">Content</ts-button>

React

import { TsButton } from '@tessera-ui/react';

<TsButton appearance="solid" size="md">Content</TsButton>