User
Maintainer:
DakEnviy
size
name
description
import {User} from '@gravity-ui/uikit';
This is a general component for displaying a user avatar with an info block. It uses the Avatar component to render the avatar. It can also accept a custom React node as an avatar.
Name and description
The User component has the name and description properties to display an info block.
CD
Charles Darwincharles@mail.ai
<User avatar={{text: 'Charles Darwin', theme: 'brand'}} name="Charles Darwin" description="charles@mail.ai" size="l" />Size
Use the size property to manage the User size. The default size is m. The possible values are 3xs, 2xs, xs, s, m, l, and xl.
This property is also provided to the internal Avatar component.
C
Charles Darwin
CD
Charles Darwin
CD
Charles Darwin
CD
Charles Darwincharles@mail.ai
CD
Charles Darwincharles@mail.ai
CD
Charles Darwincharles@mail.ai
CD
Charles Darwincharles@mail.ai
<User avatar={{text: 'Charles Darwin', theme: 'brand'}} name="Charles Darwin" description="charles@mail.ai" size="3xs" />
<User avatar={{text: 'Charles Darwin', theme: 'brand'}} name="Charles Darwin" description="charles@mail.ai" size="2xs" />
<User avatar={{text: 'Charles Darwin', theme: 'brand'}} name="Charles Darwin" description="charles@mail.ai" size="xs" />
<User avatar={{text: 'Charles Darwin', theme: 'brand'}} name="Charles Darwin" description="charles@mail.ai" size="s" />
<User avatar={{text: 'Charles Darwin', theme: 'brand'}} name="Charles Darwin" description="charles@mail.ai" size="m" />
<User avatar={{text: 'Charles Darwin', theme: 'brand'}} name="Charles Darwin" description="charles@mail.ai" size="l" />
<User avatar={{text: 'Charles Darwin', theme: 'brand'}} name="Charles Darwin" description="charles@mail.ai" size="xl" />Properties
| Name | Description | Type | Default |
|---|---|---|---|
| avatar | User avatar | AvatarProps string React.ReactElement | |
| name | User name | React.ReactNode | |
| description | User description | React.ReactNode | |
| size | User section size | '3xs' '2xs' 'xs' 's' 'm' 'l' 'xl' | m |
| aria-label | aria-label for the user section | string | |
| aria-labelledby | aria-labelledby for the user section | string | |
| aria-describedby | aria-describedby for the user section | string | |
| aria-details | aria-details for the user section | string | |
| className | Custom CSS class for the root element | string | |
| style | HTML style attribute | React.CSSProperties | |
| qa | data-qa HTML attribute, used for testing | string |
CSS API
| Name | Description |
|---|---|
--g-user-avatar-offset | Gap between avatar and text block |
--g-user-name-font-weight | Name font weight |
--g-user-name-font-size | Name font size |
--g-user-name-line-height | Name line height |
--g-user-description-font-weight | Description font weight |
--g-user-description-font-size | Description font size |
--g-user-description-line-height | Description line height |