Elements
Avatars, badges, button groups, buttons, and dropdown menus.
How To Use This Page
Elements sits inside the Application UI part of the catalog and collects reusable examples that solve the same job in different ways.
This page currently groups 5 examples so you can compare structure, emphasis, and density before choosing an implementation direction.
How The Content Is Grouped
- The examples are grouped as a single Application UI reference page so you can compare variations without leaving the route.
- Use the jump links to move straight to the most relevant example once you know which structure, layout, or emphasis pattern you need.
SECTION 1 — AVATARS
Avatars
5 variants
1. Circular avatars
2. With top notification
3. With text
Tom Cook
tom@example.com
Ana Portillo
ana@example.com
4. Avatar group stacked
5. With placeholder icon
SECTION 2 — BADGES
Badges
5 variants
1. Basic badges
2. Rounded badges
3. With dot
4. Large badges
5. With remove button
SECTION 3 — BUTTON GROUPS
1. Basic
2. With dropdown
3. With checkbox and dropdown
4. Icon only
SECTION 4 — DROPDOWNS
Dropdowns
5 variants
1. Simple
2. With dividers
3. With icons
4. Minimal menu icon
5. With simple header
SECTION 5 — BUTTONS
Primary
Secondary
Outline
Ghost
Destructive
Brand
With leading icon
Circular