Skip to main content Sidebar
Design tokens Components Layout Style utilities
Privacy Code of Conduct Licence Impressum
© 2025 Placer • Built with Astro

We’d love to hear from you. Please reach out to us with any questions or inquiries 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!
Skip to table of contents

The Placer Toolkit alpha has arrived! 🎉
Plenty of changes are coming your way—some big, some breaking, some even nuclear! Beware the changelog…

Bring it on!

    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 attributes and properties.

    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.1/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.1/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";