Avatar

Use cases:

• Display an image or text (usually initials) to represent a user.
• Personalise the experience for a user

Example

JD

Genesis

Declaration

<rapid-avatar shape="circle"></rapid-avatar>

Usage

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

React

Declaration

  <rapid-avatar shape="circle"></rapid-avatar>

Usage

export function MyComponent() {
  return (
    <rapid-avatar shape="circle"></rapid-avatar>
  );
}

Angular

Declaration

  <rapid-avatar shape="circle"></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"></rapid-avatar>
      `,
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  imports: [FormsModule],
})
export class AppComponent {
}

API

Property and attribute binding examples for Genesis Component syntax. Closing tag omitted.

Name	Type	Description	Example
alt	string	Alternate text to display.	<rapid-avatar alt="User Profile Image">
link	string	URL link assigned to the avatar.	<rapid-avatar link="https://someLink">
name	string	The name associated to 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 color 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 doesn't have any properties which are not also controlled via attributes.

Slots

Name	Description
media	Used for media such as an image.
Default	The default slot for avatar text, 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.