Button
A customizable button component with various styles and states.
Importing
ts
import "@tapsioss/web-components/button/standard";ts
import { Button } from "@tapsioss/react-components/Button";Component Usage
html
<tapsi-button></tapsi-button>tsx
<Button />Properties
| Name | Description | Type | Default Value |
|---|---|---|---|
disabled | Whether the button is disabled. | boolean | false |
type | The type of the button. | "button" | "submit" | "reset" | - |
label | The accessible label for the button. | string | - |
loading | Whether the button is in a loading state. | boolean | false |
size | The size of the button. | "sm" | "md" | "lg" | "md" |
variant | The variant style of the button. | "primary" | "ghost" | "naked" | "elevated" | "destructive" | "brand" | "primary" |
href | The URL that the link button points to. | string | "" |
download | The filename to use when downloading the linked resource. If not specified, the browser will determine a filename. This is only applicable when the button is used as a link (href is set). | string | "" |
target | Where to display the linked href URL for a link button. Common options include _blank to open in a new tab. | "_blank" | "_parent" | "_self" | "_top" | "" | "" |
autofocus | Indicates that the element should be focused on page load. https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus | boolean | false |
Slots
| Name | Description |
|---|---|
| - | Button's content. |
TIP
You can use slot names as variables:
ts
import { Slots } from "@tapsioss/web-components/button/standard";
console.log(Slots.DEFAULT); // ""ts
import { ButtonSlots } from "@tapsioss/react-components";
console.log(ButtonSlots.DEFAULT); // ""