Avatar

An avatar is an element that can be used to personalize a display (for example, to display an image or the initials of a user) or to act as signals to indicate the status of content. You can include a link with the avatar so that if a user clicks on it, they can go to a different URL.

Use cases:

• display an image or text (usually initials) to represent a user
• personalize the experience for a user

Example

This simple example displays a green circular avatar with text (initials).

JD

React

Declaration

<rapid-avatar></rapid-avatar>

Usage

@customElement({
  name: 'my-element',
  template: html`
    <rapid-avatar shape="circle" fill="green" color="black">JD</rapid-avatar>
  `,
})
export class MyElement extends GenesisElement {
}

Genesis

Declaration

<Avatar></Avatar>

Usage

import { Avatar } from '@genesislcap/rapid-design-system/react';

export function MyComponent() {
  return (
    <Avatar shape="circle" fill="green" color="black">JD</Avatar>
  );
}

Angular

Declaration

  <rapid-avatar></rapid-avatar>

Usage

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { FormsModule } from '@angular/forms';
@Component({
  selector: 'my-root',
  template: `
        <rapid-avatar shape="circle" fill="green" color="black">JD</rapid-avatar>
      `,
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  imports: [FormsModule],
})
export class AppComponent {
}

API

Attributes

This table shows attribute binding examples for Genesis Component syntax. The HTML closing tag is not included.

Name	Type	Description	Example
link	string	URL link assigned to the avatar.	<rapid-avatar link="https://someLink">
name	string	The name associated with the avatar.	<rapid-avatar name="JohnDoe">
shape	"circle" | "square"	The shape of the avatar. Defaults to circle.	<rapid-avatar shape="circle">
fill	string	Background fill colour of the avatar.	<rapid-avatar fill="primary">
color	string	The text colour of the avatar.	<rapid-avatar color="dark">

note

The fill and color attributes of the avatar create CSS custom properties, which can be used to style the control.

• Pass in the css name minus the "avatar-fill-" string for fill.
• Pass in the css name minus the "avatar-color-" string for color.

alpha-avatar {
  --avatar-fill-primary: #0EAFE2;
  --avatar-fill-danger: #ff0000;
  --avatar-color-light: #ffffff;
  --avatar-color-dark: #000000;
}

Properties

This component is controlled via attributes.

Slots

Name	Description
media	Used for media, such as an image.
Default	The default slot for avatar text, which is commonly a name or initials.
badge	Used to provide a badge, such as a status badge.

Parts

Name	Description
backplate	The wrapping container for the avatar.
link	The avatar link.
media	The media slot.
content	The default slot.

Events fired

This component doesn't fire any events.

Events listened to

This component doesn't listen to any events.