Skip to content
Forge

Buttons: HTML, React and WordPress components

Primary, secondary, icon and loading buttons: consistent styles, a large enough hit area and a visible keyboard focus.8 components (buttons) that are accessible and responsive, ready for your site: HTML + Tailwind, React, plain CSS and a WordPress block.

All 8 resources

  • Round icon buttons

    Free

    Circular icon buttons with an accessible tooltip on hover and focus.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component

  • Split button with menu

    Coming soon

    A primary action joined to a menu of secondary options.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component

  • Raised button

    Free

    A chunky button that sinks under the finger, for primary actions.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component

  • Gradient pill button

    Coming soon

    A colorful pill crossed by a light sheen on hover.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component

  • Animated underline link

    Free

    A text link whose underline draws from left to right on hover.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component

  • Animated outline button

    Coming soon

    A ghost button whose outline lights up and spins on hover.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component

  • Button with loading state

    Free

    A button that announces the pending request then success, without changing width.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component

  • Toggle button toolbar

    Free

    A group of icon buttons with a single active choice, like text alignment.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component

Other component categories