Skip to content
Try free

Buttons and actions (Desktop)

Desktop packActions and input

Desktop buttons in every state: primary to destructive, icon, split, menu, group, toolbar, toggle and segmented controls.

components
11
variants
254
recreations
10
themes
5

Also for mobile: Buttons and actions

What’s inside

Fifteen button patterns for web apps, from primary, secondary, ghost, link, destructive and loading buttons to icon buttons with tooltips, split and menu buttons, button groups, toolbars, segmented controls, toggles, inactive buttons and destructive confirms. Every button has default, hover, pressed, focus, disabled and loading, with a documented focus ring and hover and press prototypes.

  • Buttons in 6 styles, 3 sizes and 6 states
  • Split, menu, toggle and segmented buttons with open menus
  • Destructive confirm patterns, including type to confirm
  • 10 recreations from 8 real products
  • Button, every variant

    Button

    Free sample

    108 variants

  • Icon button, every variant

    Icon button

    75 variants

  • Icon button with tooltip, every variant

    Icon button with tooltip

    3 variants

  • Split button, every variant

    Split button

    16 variants

  • Menu button, every variant

    Menu button

    15 variants

  • Button group, every variant

    Button group

    4 variants

  • Button toolbar, every variant

    Button toolbar

    3 variants

  • Segmented control, every variant

    Segmented control

    4 variants

  • Toggle button, every variant

    Toggle button

    16 variants

  • Inactive button, every variant

    Inactive button

    6 variants

  • Destructive confirm, every variant

    Destructive confirm

    4 variants

Figma file
SuperDuper Pack: Buttons (Desktop)
Themes
Light, Dark, Light high contrast, Dark high contrast and Wireframe
Densities
Comfortable and Compact
Also in the file
Usage and accessibility notes, motion specs, Figma variables
Covers 5 UI elements
Button, Icon button, Text link, Floating action button and Social login button

How GitHub, Basecamp and Replit and others do it

Recreations of real products, so you can compare approaches side by side. They are approximate, built from public product knowledge, with placeholder data and no third-party artwork.

  • Code host split button, every variant

    Code host split button

    Recreated from GitHub

  • Message board split button, every variant

    Message board split button

    Recreated from Basecamp

  • Loading button with trailing spinner, every variant

    Loading button with trailing spinner

    Recreated from Replit

  • Pay button

    Recreated from Stripe Checkout

  • Markdown toolbar, every variant

    Markdown toolbar

    Recreated from GitHub

  • Rich-text toolbar, every variant

    Rich-text toolbar

    Recreated from Basecamp

  • Disabled submit in a bulk email composer, every variant

    Disabled submit in a bulk email composer

    Recreated from Calendly

  • Double type-to-confirm delete

    Recreated from Plane

  • Simple delete confirm

    Recreated from Gumloop

  • Bulk delete confirm with count

    Recreated from AirOps

Not affiliated with, endorsed or sponsored by GitHub, Basecamp, Replit, Stripe Checkout, Calendly, Plane, Gumloop and AirOps. Their names are trade marks of their owners and are used only to say what each recreation is based on.

Button, every variant

See the button full size, free

The core button in six styles, three sizes and six states, from default to loading. All 108 variants, free to see with a SuperDuperUI account. The Figma file comes with the pack.

More actions and input packs

See all actions and input

  • Date, time and calendars

    Desktop17 components73 variants4 recreations

    Desktop date and time fields, calendar and range pickers, time zones, month, week and day views, events and slot pickers.

    $9, or included with Pro

  • Search

    Desktop10 components34 variants4 recreations

    Desktop search: header trigger, global popover, autocomplete, match highlights, recents, scoped search, results and no results.

    $9, or included with Pro

  • Selection controls

    Desktop13 components54 variants3 recreations

    Desktop checkbox and radio groups, setting switches, sliders, steppers, ratings, swatches, a colour picker and a transfer list.

    $9, or included with Pro

Questions about the buttons and actions pack

  • One Figma file: SuperDuper Pack: Buttons (Desktop). It has 11 components with 254 variants, 10 recreations, and notes on when to use each part. Everything uses Figma variables, so you can change the colours and type to match your product.