ContextQMD
Back to Grafana

UserIcon

packages/grafana-ui/src/components/UsersIndicator/UserIcon.mdx

13.0.11.7 KB
Original Source

import { Meta, ArgTypes } from '@storybook/blocks'; import { UserIcon } from './UserIcon';

<Meta title="MDX|UserIcon" component={UserIcon} />

UserIcon

UserIcon a component that takes in the UserIconProps interface as a prop. It renders a user icon and displays the user's name or initials along with the user's active status or last viewed date.

Usage

To use the UserIcon component, import it and pass in the required UserIconProps. The component can be used as follows:

jsx
import { UserIcon } from '@grafana/ui';

const ExampleComponent = () => {
  const userView = {
    user: { id: 1, name: 'John Smith', avatarUrl: 'https://example.com/avatar.png' },
    lastActiveAt: '2023-04-18T15:00:00.000Z',
  };

  return (
    <div>
      <UserIcon userView={userView} showTooltip={true} className={styles.custom} />
    </div>
  );
};

With custom children

children prop can be used to display a custom content inside UserIcon. This is useful to show the data about extra users.

jsx
import { UserIcon } from '@grafana/ui';

const ExampleComponent = () => {
  const userView = {
    user: { id: 1, name: 'John Smith', avatarUrl: 'https://example.com/avatar.png' },
    lastActiveAt: '2023-04-18T15:00:00.000Z',
  };

  return (
    <div>
      <UserIcon userView={userView} showTooltip={false}>
        +10
      </UserIcon>
    </div>
  );
};
<ArgTypes of={UserIcon} />

UserView type

tsx
import { DateTimeInput } from '@grafana/data';

export interface UserView {
  user: {
    /** User's name, containing first + last name */
    name: string;
    /** URL to the user's avatar */
    avatarUrl?: string;
  };
  /** Datetime string when the user was last active */
  lastActiveAt?: DateTimeInput;
}