Tango UI components examples

Tango

A color picker component allowing users to select a highlight color from a predefined palette or add a custom color.

• Color picker

Tango

• Dropdown menu

Tango

A card displaying a workflow preview, title, timestamp, and associated app icons.

• Card

Tango

A vertical sidebar navigation menu featuring a workspace switcher, search bar, primary navigation links with icons, a member quota indicator, an invite button, and secondary links including a prominent feature announcement.

• Vertical navigation

Tango

A header for an onboarding section showing a completed progress bar and a collapse icon.

• Progress indicator

Tango

A circular progress indicator showing the current number of free members used out of the total allowed, accompanied by a button to invite more members.

• Progress indicator

Tango

A top navigation bar featuring a logo, page title with contextual actions, primary and secondary action buttons, and a user profile avatar.

• Horizontal navigation

Tango

An inline informational alert banner with a blue icon, explanatory text, and an embedded text link.

• Alert

Tango

A small, pill-shaped alert badge containing a lightning bolt icon and a brief informational message about automatic updates.

• Alert

Tango

A card displaying an onboarding checklist with a progress bar and a list of tasks. One task is completed, one is active with a call-to-action button, and two are pending.

• Stepper

Tango

A dropdown input field with a label asking 'What is your role?' and placeholder text 'Click to select...'.

• Input select

Tango

A horizontal progress bar indicating 40% completion, with a text label centered above the track.

• Progress indicator