UI Component Names: Modals, Tabs, Tooltips & More

›What's a popover?

A small panel anchored to a trigger element.

›How does it differ from a modal?

Popovers are non-blocking and dismiss on outside click.

›Native HTML support?

Yes — the `popover` attribute now ships in major browsers.

Accordion

A vertically stacked set of headings that each toggle a region of content open or closed.

Action sheet

A sheet that slides up from the bottom of the screen with a list of buttons, used to confirm or pick from a few related actions.

Alert dialog

A dialog that interrupts the user to confirm a consequential or destructive action before it happens.

AM

JK

RP

SD

+4

EM

Avatar

A small image that represents a user, account, or entity, usually circular and used next to names or actions.

12

3

2

Inbox

Email

Alerts

Cart

Badge

A small label, often a number or a dot, that sits on or beside another element to indicate status or count.

Sort by

Newest first

Oldest first

A → Z

Bottom sheet

A panel that slides up from the bottom of the screen, often draggable to expand or dismiss.

Breadcrumbs

A horizontal list of links showing the user's location in a site's hierarchy, with each level clickable to navigate up.

Article

3 min

Guide

8 min

Card

A bounded rectangular container that groups related content and actions as a single unit.

01

02

03

04

Carousel

A horizontally scrolling row of items that the user pages through, often with dots or arrows to navigate.

Chip

A small pill-shaped element that represents an input, attribute, selection, or filter, often interactive.

Combobox

A text input combined with a dropdown list of suggestions that filter as the user types.

Command palette

A searchable launcher that lets users type to find and run actions, navigate, or jump to records.

Dialog

A window that appears over the rest of the UI to prompt the user for input or attention before they can continue.

Drawer

A panel that slides in from the edge of the screen, holding secondary content or navigation.

Floating action button

A circular, elevated button anchored to a corner of the screen that triggers the most common action on the current view.

Pagination

A control that splits a long list into numbered pages, with links to jump between them.

Popover

A small floating panel anchored to a trigger element, used for short contextual content.

Segmented control

A row of joined buttons that act as a mutually-exclusive selector — exactly one segment is active at a time.

Volume

62

Brightness

38

Slider

A draggable handle on a track that lets the user pick a value, or range of values, from a continuous scale.

1 Account

2 Payment

3 Review

Stepper

An ambiguous term used for two different controls: a numeric +/- input, or a multi-step progress indicator.

Notifications

Email and push

Dark mode

Use system theme

Auto-save

Every 30 seconds

Components