Linkedin UI components examples

Linkedin

A toast notification displaying an error message preventing the user from leaving a group.

• Notification Toast

Linkedin

A progress bar showing profile completion status, labeled 'Intermediate' with a step count of 4/7. It includes a prompt to complete remaining steps to achieve 'All-star' status.

• Progress indicator

Linkedin

An inline alert banner suggesting the user add key skills to their profile, featuring a lightbulb icon and a call-to-action link.

• Alert

Linkedin

A line chart displaying profile viewers over time, featuring a summary KPI at the top left and a tooltip showing details for a specific data point.

• Charts

Linkedin

A line chart displaying profile viewers over time, with a summary metric and percentage change indicator at the top.

• Charts

Linkedin

A settings section allowing users to select their preferred appearance mode (Device settings, Dark mode, or Light mode) using radio buttons.

• Theme settings

Linkedin

A settings section allowing the user to select their preferred theme mode (Device settings, Dark mode, or Light mode) using a radio group.

• Theme settings

Linkedin

A radio group presented as two side-by-side cards, allowing the user to select between monthly and annual billing cycles. The monthly option is currently selected. The annual option includes a 'Best value' badge.

• Checkbox & radio

Linkedin

A section prompting the user to update settings, featuring a toggle switch to turn on email updates.

• Toggle/Switch

Linkedin

A group of pill-shaped toggle buttons for selecting job location types, with an overarching label.

• Sorting & filtering

Linkedin

A card component displaying onboarding progress with a progress bar, an illustration, descriptive text, and a primary call-to-action button.

• Progress indicator

Linkedin

A card displaying a company profile recommendation, including a cover image, logo, company name, follower count, and a 'Follow' button. A close icon is positioned in the top right corner.

• Card