Skip to main content

Official Website

of the Commonwealth of Pennsylvania

    The .gov means its 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 tap

    Overview

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

    Use the standalone icon button sparingly- it is usually a part of another component.

    Formatting

    Anatomy

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

     

    Button Variants

    Icon buttons come in three sizes and four styles. Let the action you want to trigger determine the correct button to choose.

    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.