User Profile
Displays the current user's profile with avatar, name, email, and logout.
Code​
- HTML · @primus/ui-core
- React
- Angular
<div class="card" style="max-width:240px;padding:1.25rem;text-align:center">
<div style="width:52px;height:52px;border-radius:50%;background:color-mix(in srgb,var(--primary) 15%,transparent);display:flex;align-items:center;justify-content:center;margin:0 auto 0.75rem;font-size:1.1rem;font-weight:600;color:var(--primary)">JD</div>
<p style="margin:0 0 0.2rem;font-weight:600;font-size:0.9rem">Jane Doe</p>
<p style="margin:0 0 0.75rem;font-size:0.775rem;color:var(--muted-foreground)">jane@acme.com</p>
<span class="badge accent">Enterprise</span>
<div style="margin-top:1rem;padding-top:0.75rem;border-top:1px solid var(--border)">
<button class="ghost small" style="width:100%">Sign out</button>
</div>
</div>
import { UserProfile } from 'primus-react-ui';
<UserProfile />
<primus-user-profile [user]="currentUser" [showLogout]="true"
[useService]="true" (loggedOut)="onLoggedOut()">
</primus-user-profile>
Props​
| Prop | Type | Default | Description |
|---|---|---|---|
user | PrimusUser | — | User object |
showLogout | boolean | true | Show logout |
useService | boolean | true | Auto-load from PrimusAuthService |
Version history
See the Changelog for version history and breaking changes.