Skip to main content Sidebar
On this page
Skip to table of contents

Button

<pc-button> 0.1.0 experimental

Buttons represent actions that are available to the user.

<pc-button>Button</pc-button>
Code Edit

Demos

Appearances

Use the appearance attribute to set the button’s appearance.

Edit

Variants

Use the variant attribute to set the button’s variant.

Edit

Sizes

Use the size attribute to change the button’s size.

Edit

Pill

Use the pill attribute to give buttons a pill‐shaped look.

Edit

It’s often helpful to have a button that works like a link. This is possible by setting the href attribute, which will make the component render as an <a> under the hood. This gives you all the default link behaviour the browser provides (e.g., Ctrl or Shift + ) and exposes the target and download attributes.

Edit

When a target is set, the link will receive rel="noreferrer noopener" for security reasons.

Icon buttons

When only an icon is slotted into the default slot, the button becomes an icon button. In this case, it’s important to give the icon a label for users with assistive devices. Icon buttons can use any appearance or variant.

Edit

Custom width

As expected, buttons can be given a custom width by passing inline styles to the component (or using a class). This is useful for making buttons span the full width of their container on smaller screens.

Edit

Prefixes and suffixes

Use the prefix and suffix slots to add icons.

Edit

Disabled

Use the disabled attribute to disable a button.

Edit

Custom styles

This example demonstrates how to style buttons using a custom class. This is the recommended approach if you need to add additional appearances. To customise an existing appearance, modify the selector to target the button’s appearance attribute instead of a class (e.g., pc-button[appearance="primary"]).

Edit

Properties

NameDescriptionReflectsDefault
appearanceThe button’s appearance.
Type: "primary" | "success" | "neutral" | "warning" | "danger" | "text"		 "neutral"
variantThe button’s variant.
Type: "accent" | "filled" | "outlined" | "plain"		 "accent"
sizeThe button’s size.
Type: "small" | "medium" | "large"		 "medium"
disabledDisables the button.
Type: boolean		 false
pillDraws a pill‐style button.
Type: boolean		 false
typeThe type of button. Note that the default value is button instead of submit, which is opposite of how native <button> elements behave. When the type is submit, the button will submit the surrounding form.
Type: "button" | "submit" | "reset"		 "button"
nameThe name of the button, submitted as a name/value pair with form data, but only when this button is the submitter.
Type: string		 ""
valueThe value of the button, submitted as a pair with the button’s name as part of the form data, but only when this button is the submitter. This attribute is ignored when the href attribute is present.
Type: string		 ""
hrefWhen set, the underlying button will be rendered as an <a> with this href instead of a <button>.
Type: string		 ""
targetTells the browser where to open the link. It should only be used when the href attribute is present.
Type: "_blank" | "_parent" | "_self" | "_top" | undefined		 ‐
relWhen using the href attribute, this attribute will map to the underlying link’s rel attribute. Unlike regular links, the default set for this attribute is noreferrer noopener to prevent security exploits. However, if you’re using target to point to a specific tab or window, this will prevent that from working properly. You can remove or change the default value by setting the attribute to an empty string or a value of your choice, respectively.
Type: string		 "noreferrer noopener"
downloadTells the browser to download the linked file as this file name. Only used when the href attribute is present.
Type: string | undefined		 ‐
formThis is the “form owner” to associate the button with. If omitted, the closest containing form will be used instead. The value of this attribute must be an id of a form in the same document or shadow root as the button.
Type: string | undefined		 ‐
formAction
formaction		Used to override the form owner’s action attribute.
Type: string | undefined		 ‐
formEnctype
formenctype		Used to override the form owner’s enctype attribute.
Type: "application/x-www-form-url-encoded" | "multipart/form-data" | "text/plain" | undefined		 ‐
formMethod
formmethod		Used to override the form owner’s method attribute.
Type: "GET" | "POST" | undefined		 ‐
formNoValidate
formnovalidate		Used to override the form owner’s novalidate attribute.
Type: boolean | undefined		 ‐
formTarget
formtarget		Used to override the form owner’s target attribute.
Type: "_self" | "_blank" | "_parent" | "_top" | string | undefined		 ‐
validityGets the validity state object. ‐
validationMessageGets the validation message. ‐
updateComplete A read‐only promise that resolves when the component has finished updating. ‐

Learn more about customising animations.

Slots

NameDescription
(default)The button’s label.
prefixA presentational prefix icon or similar element.
suffixA presentational suffix icon or similar element.

Learn more about using slots.

Methods

NameDescriptionArguments
click()Simulates a click on the button.‐
focus()Focuses the button.options: FocusOptions
blur()Unfocuses the button (i.e., blurs it).‐
checkValidity()Checks for validity but doesn’t show a validation message. Returns true when valid and false when invalid.‐
getForm()Gets the associated form if one exists.‐
reportValidity()Checks for validity and shows the browser’s validation message if the control is invalid.‐
setCustomValidity()Sets a custom validation message. Pass an empty string to restore validity.message: string

Learn more about methods.

Events

NameDescriptionEvent detail
pc-focusEmitted when the button gains focus.‐
pc-blurEmitted when the button loses focus (i.e., is blurred).‐
pc-invalidEmitted when the form control has been checked for validity and its constraints aren’t satisfied.‐

Learn more about events.

Parts

NameDescription
baseThe component’s base wrapper.
prefixThe container that wraps the prefix.
labelThe button’s label.
suffixThe container that wraps the suffix.

Learn more about customising CSS parts.

Importing

If you’re using the autoloader or the standard loader, you can skip this section. But if you’re cherry picking, you can use any of the following snippets to import this component.

CDN (script tag)CDN (import)npm (import)

To manually import this component from the CDN, copy this code snippet and paste it in your HTML. 

<script type="module" src="https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.3/cdn/components/button/button.js"></script>

To manually import this component from the CDN, copy this code snippet and paste it in your JavaScript file. 

import "https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.3/cdn/components/button/button.js";

To manually import this component from npm, copy this code snippet and paste it in your JavaScript file. 

import "placer-toolkit/dist/components/button/button.js";

We’d love to hear from you. Please reach out to us with any questions or enquiries you may have.

You can contact us via e‐mail at placer.coc.reports+contact@gmail.com.

We look forward to hearing from you!

Got it! Dangerous lands

Whoa! You’ve wandered into the dangerous lands of Placer Toolkit. Version 0 is out of date and doesn’t meet EU privacy standards, including GDPR.

Want the latest powers, security and compliance? Stick with the current version of Placer Toolkit!

Yikes! Power up!

Our site is 100 % cookie‐free! We value your privacy, which is why we don’t store any cookies or personal information related to you.

Your browser history is safe from crumbs, and your data is protected, aligning with modern privacy standards like the GDPR. Enjoy your visit without a single digital cookie in sight! 🍪🚫

View our Privacy Policy for more information.

Got it!