Skip to main content Design tokens Components Style utilities
Skip to table of contents

    Icon Button

    Icon buttons are simple, icon‐only buttons that can be used for actions and in toolbars.

    For a full list of icons that come bundled in with Placer Toolkit, see the Icon component docs.

    <pc-icon-button
  library="default"
  icon-style="solid"
  name="gear"
  label="Settings"
></pc-icon-button>
    Code

    Demos

    Sizes

    Icon buttons are sized based on the current font size. To change their size, set the font-size property on the icon button itself as shown below or on a parent element.

    Colours

    Icon buttons are designed to have a uniform appearance, so their colour is not inherited. However, you can still customise them by styling the base part.

    Use the href attribute to convert the button to a link.

    When using target="_blank", the component automatically adds rel="noreferrer noopener" for security reasons.

    Icon button with tooltip

    Wrap a tooltip around an icon button to provide contextual information to the user.

    Disabled

    Use the disabled attribute to disable the icon button.

    Properties

    NameDescriptionReflectsDefault
    dependencies object{ "pc-icon": PcIcon }
    button HTMLButtonElement | HTMLLinkElement-
    disabled booleanfalse
    download string | undefined-
    href string | undefined-
    iconStyle
    icon-style    		 string | undefined-
    label string""
    library string | undefined-
    name string | undefined-
    src string | undefined-
    target "_blank" | "_parent" | "_self" | "_top" | undefined-
    updateComplete A read‐only promise that resolves when the component has finished updating. -

    Learn more about attributes and properties.

    Methods

    NameDescriptionArguments
    click()-
    focus()options: FocusOptions
    blur()-

    Learn more about methods.

    Importing

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

    ScriptImportBundler

    To import this component from the CDN with a script tag, copy this snippet and paste it in your HTML. 

    <script type="module" src="https://cdn.jsdelivr.net/npm/placer-toolkit@0.5.1/dist/components/icon-button/icon-button.js"></script>

    To import this component from the CDN using a JavaScript import, copy this snippet and paste it in your JavaScript: 

    import "https://cdn.jsdelivr.net/npm/placer-toolkit@0.5.1/dist/components/icon-button/icon-button.js";

    To import this component with a bundler using a JavaScript import, copy this snippet and paste it in your JavaScript: 

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