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
Chips, tags and badges (Desktop)
Desktop packActions and input
Desktop tags, labels, lozenges, count badges and status indicators, sized for dense tables and sidebars.
- components
- 10
- variants
- 64
- recreations
- 3
- themes
- 5
Also for mobile: Chips, tags and badges
What’s inside
10 patterns for labelling things on desktop: static and removable tags, tag groups with overflow, issue labels in five colours, a token field, due date labels, status lozenges, count badges, status dots and status shapes. Every status pairs colour with a glyph or word. Each page has a documentation frame and a live grid in light and dark, comfortable and compact, and seven show a 1040 px list or sidebar.
- Issue labels: filled, outlined and scoped in 5 colours
- Status shown by glyph or word as well as colour
- 3 recreations of label and status models from work tools
Static tag
6 variants
- Plain
- With icon
- Selected
Removable tag
4 variants
- Default
- Hover
- Focus
- Disabled
Tag group
3 variants
- Fits
- Overflow
- Overflow open
Issue label
15 variants
- Filled
- Outlined
- Scoped
Token field
3 variants
- Filled
- Focus
- Disabled
Date label
4 variants
- Upcoming
- Due soon
- Overdue
- Done
Status lozenge
Free sample6 variants
- Default
- In progress
- Done
- Moved
- New
- Removed
Count badge
9 variants
- Neutral
- Brand
- Danger
- One digit
- Two digits
- Overflow
Status dot
8 variants
- Online
- Away
- Busy
- Offline
Status shape
6 variants
- Success
- Warning
- Failed
- Informational
- In progress
- Not started
- Figma file
- SuperDuper Pack: Chips, tags and badges (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 2 UI elements
- Chip and Badge
How GitHub, Linear and Jira 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 labels
Recreated from GitHub
Issue tracker status
Recreated from Linear
Work tracker lozenges
Recreated from Jira
Not affiliated with, endorsed or sponsored by GitHub, Linear and Jira. Their names are trade marks of their owners and are used only to say what each recreation is based on.
See the status lozenge full size, free
Sentence-case status lozenges with a glyph each: default, in progress, done, moved, new and removed. All 6 variants, free to see with a SuperDuperUI account. The Figma file comes with the pack.
More actions and input packs
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 chips, tags and badges pack
One Figma file: SuperDuper Pack: Chips, tags and badges (Desktop). It has 10 components with 64 variants, 3 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.