Skip to main content

Official website

of the Commonwealth of Pennsylvania

    The .gov means it's official.

    Local, state, and federal government websites often end in .gov. Commonwealth of Pennsylvania government websites and email systems use "pennsylvania.gov" or "PA.gov" at the end of the address. Before sharing sensitive or personal information, make sure you're on an official state website. 
    Components

    Icon Button

    Icon buttons help people take minor actions with one click or tap.

    Overview

    Icon buttons are clickable elements that trigger actions. They communicate calls to action to the user. They allow users to interact with pages in a variety of ways.

    The icon button is typically used as part of another component. Use it as a standalone component sparingly.

    Formatting

    Anatomy

    A view of an icon button with markers numbered 1 &2
    1. Container: The primary element that holds content, color, and icons.
    2. Icon

    Variants

    Icon buttons come in three sizes and four styles. Choose the correct button based on the action you want to trigger.

    A view of all of the different icon button options, including S, M, L; enabled, hovered, focus, pressed, disabled; and standard, filled, tonal, outlined.

    Behavior

    Interactions

    Mouse

    Users can trigger a button by clicking anywhere within the button container.

    Keyboard

    Users can trigger a button by pressing enter or space while the button has focus.