Button

Buttons allow users to take actions, and make choices, with a single tap.

Importing

To use the button component, first you need to register the component inside the page. You can register the component manually by importing the register function:

Web (Option 1)

import { register } from "@tapsioss/web-components/button/standard";

register(); // Now the button component is ready to use!

Web (Option 2)

import { registerButton } from "@tapsioss/web-components";

registerButton(); // Now the button component is ready to use!

Also you can automatically register the component by importing it with the following approach:

Web

import "@tapsioss/web-components/button/standard/element";

TIP

If you want to use all the component in your app, you can call registerAll at the root of your project.

import { registerAll } from "@tapsioss/web-components";

registerAll(); // All the components are now available

In the React package, you can easily add the component using the following code:

React

import { Button } from "@tapsioss/react-components";

Component Usage

Web

<tapsi-button></tapsi-button>

React

<Button />

Properties

Name	Attribute Name	Description	Type	Default Value
disabled	disabled	Whether the button is disabled.	boolean	false
type	type	The type of the button.	FormSubmitterType	"submit"
label	label	The accessible label for the button.	string	""
loading	loading	Whether the button is in a loading state.	boolean	false
size	size	The size of the button.	| "sm" | "md" | "lg"	"md"
href	href	The URL that the link button points to.	string	""
download	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	target	Where to display the linked href URL for a link button. Common options include _blank to open in a new tab. When the target is set to _blank, the rel attribute of the anchor tag will automatically be set to "noopener noreferrer" to enhance security and prevent potential tab exploitation.	| "_blank" | "_parent" | "_self" | "_top" | ""	""
autofocus	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
variant	variant	The variant style of the button.	| "primary" | "ghost" | "naked" | "elevated" | "destructive" | "brand"	"primary"

Slots

Name	Value	Description
DEFAULT	-	The slot for an optional trailing icon element.
LEADING_ICON	leading-icon	The slot for an optional trailing icon element.
TRAILING_ICON	trailing-icon	The slot for an optional trailing icon element.

TIP

The value of slots are available for developer as JavaScript Variables:

Web

// Option 1
import { ButtonSlots } from "@tapsioss/web-components";

// Option 2
import { Slots } from "@tapsioss/web-components/button/standard";

React

// Option 1
import { ButtonSlots } from "@tapsioss/react-components";

// Option 2
import { Slots } from "@tapsioss/react-components/Button";