@gravity-ui/uikit
Version:
Gravity UI base styling and components
65 lines (49 loc) • 4.56 kB
Markdown
# UserLabel
`UserLabel` is a compact chip with a user's avatar and name or email, suited for inline mentions and lists (use `User` for a larger profile block and `Avatar` for the picture alone).
## Type
Used to manage avatar appearance. Use `"person"` for a personalized entity and `"email"`, for an email address. If you do not need any avatar, use `"empty"`.
```tsx
<UserLabel type="person" text="Charles Darwin (person)" />
<UserLabel type="email" text="email@example.com (email)" />
<UserLabel type="empty" text="Alan Turing (empty)" />
```
## Avatar
This component can be used with a custom avatar. It only works with `type: 'person'`. You can provide an image, a property of the [Avatar](./Avatar.md) component, or a custom React node.
```tsx
import {GraduationCap} from '@gravity-ui/icons';
<UserLabel type="person" avatar="<url>" text="Charles Darwin" />
<UserLabel type="person" avatar={{icon: GraduationCap}} text="Charles Darwin" />
```
## Interactivity
This component is also interactive: it can be clickable or closable.
```tsx
<UserLabel text="Charles Darwin" onClick={() => alert('onClick triggered')} />
<UserLabel text="Charles Darwin" onCloseClick={() => alert('onCloseClick triggered')} />
```
## Properties
| Name | Description | Type | Default |
| :----------- | :---------------------------------------------- | :-------------------------------------------------------------------------: | :----------: |
| type | Avatar appearance | `'person'` `'email'` `'empty'` | `'person'` |
| view | `UserLabel` view | `'outlined'` `'clear'` | `'outlined'` |
| size | Avatar size | `'3xs'` `'2xs'` `'xs'` `'s'` `'m'` `'l'` `'xl'` | `'s'` |
| avatar | User avatar | [AvatarProps](./Avatar.md#properties) `string` `React.ReactElement` | |
| text | Visible text | `React.ReactNode` | |
| description | User description | `React.ReactNode` | |
| onClick | `click` event handler for the component | `Function` | |
| onCloseClick | `click` event handler for the cross-icon button | `Function` | |
| 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-label-size` | Size for avatar (width and height) and height for label |
| `--g-user-label-border-radius` | Label border radius |
| `--g-user-label-padding` | Label horizontal padding |
| `--g-user-label-gap` | Gap between elements (avatar, text, close icon) |
| `--g-user-label-text-font-weight` | Text font weight |
| `--g-user-label-text-font-size` | Text font size |
| `--g-user-label-text-line-height` | Text line height |
| `--g-user-label-description-font-weight` | Description font weight |
| `--g-user-label-description-font-size` | Description font size |
| `--g-user-label-description-line-height` | Description line height |