IconButton
A customizable icon button component with various styles and states.
Importing
ts
import "@tapsioss/web-components/button/icon-button";ts
import { IconButton } from "@tapsioss/react-components/IconButton";Component Usage
html
<tapsi-icon-button></tapsi-icon-button>tsx
<IconButton />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 |
|---|---|
| - | Icon button's content. |
TIP
You can use slot names as variables:
ts
import { Slots } from "@tapsioss/web-components/button/icon-button";
console.log(Slots.DEFAULT); // ""ts
import { IconButtonSlots } from "@tapsioss/react-components";
console.log(IconButtonSlots.DEFAULT); // ""