← Back to Components

User Card

User profile cards with avatar, name, subtitle, and three interaction variants: default display, chevron navigation, and delete actions with confirmation

Navigation vs Interaction

Navigation to User Profile

Navigation: Uses Next.js Link to navigate to user profile pages. Click to navigate.

Interactive User Selection

Carol Chen
UX Designer
David Davis
Data Scientist

Interaction: Uses onClick for custom actions like user selection or workflow triggers.

External Profile Links

External Link: Links to external profiles with proper target and rel attributes.

Default Variant

Basic display card with no interaction

Alice Anderson
Senior Software Engineer
Bob Brown
Product Manager

Chevron Variant

Clickable card with chevron icon for navigation

Alice Anderson
Senior Software Engineer
Bob Brown
Product Manager

Delete Variant

Card with delete button that shows confirmation modal

Alice Anderson
Senior Software Engineer
Bob Brown
Product Manager
Carol Chen
UX Designer
David Davis
Data Scientist