@gravity-ui/uikit
Version:
Gravity UI base styling and components
46 lines (34 loc) • 3.29 kB
Markdown
# User
This is a general component for displaying a user avatar with an info block. It uses the [Avatar](./Avatar.md) component to render the avatar. It can also accept a custom React node as an avatar.
```tsx
import {User} from '@gravity-ui/uikit';
```
## Name and description
The `User` component has the `name` and `description` properties to display an info block.
## 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.
## Properties
| Name | Description | Type | Default |
| :--------------- | :----------------------------------------- | :-------------------------------------------------------------------------: | :-----: |
| avatar | User avatar | [AvatarProps](./Avatar.md#properties) `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 |