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.
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.
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.
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"]).
The button’s size.
Type:
"small" | "medium" | "large"
"medium"
disabled
Disables the button.
Type:
boolean
false
pill
Draws a pill‐style button.
Type:
boolean
false
type
The 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"
name
The name of the button, submitted as a name/value pair with form data, but only when this button is the submitter.
Type:
string
""
value
The 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
""
href
When set, the underlying button will be rendered as an <a> with this href instead of a <button>.
Type:
string
""
target
Tells the browser where to open the link. It should only be used when the href attribute is present.
Type:
"_blank" | "_parent" | "_self" | "_top" | undefined
‐
rel
When 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"
download
Tells the browser to download the linked file as this file name. Only used when the href attribute is present.
Type:
string | undefined
‐
form
This 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
‐
validity
Gets the validity state object.
‐
validationMessage
Gets the validation message.
‐
updateComplete
A read‐only promise that resolves when
the component has
finished updating.
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.
Ui! Du bist in die gefährlichen Lande von Placer Toolkit geraten. Version 0 ist veraltet und entspricht nicht den EU‐Datenschutzstandards, einschließlich DSGVO.
Willst du die neuesten Kräfte, Sicherheit und Compliance? Bleib bei der aktuellen Version von Placer Toolkit!