Badge

Use cases:

• Highlighting an item.
• Flagging an item as part of a category.
• Representing a value of unread messages.

Example

JD

Genesis

Declaration

<rapid-badge></rapid-badge>

Usage

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

React

Declaration

  <rapid-badge></rapid-badge>

Usage

export function MyComponent() {
  return (
    <rapid-badge></rapid-badge>
  );
}

Angular

Declaration

  <rapid-badge></rapid-badge>

Usage

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@Component({
  selector: 'my-root',
  template: `
        <rapid-badge></rapid-badge>
      `,
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppComponent {
}

API

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

Name	Type	Description	Example
fill	string	Background fill colour of the badge	<rapid-badge fill="primary">
color	string	The text color of the badge.	<rapid-badge color="dark">
circular	boolean	If the badge should be circular.	<rapid-badge circular>

note

The fill and color attributes of the badge create CSS custom properties, which can be used to style the control. Pass in the css name minus the "badge-fill-" string for fill. Pass in the css name minus the "badge-color-" string for color.

rapid-badge {
  --badge-fill-primary: #86bf86;
  --badge-fill-danger: #ff0000;
  --badge-color-light: #ffffff;
  --badge-color-dark: #000000;
}

Properties

This component doesn't have any properties which are not also controlled via attributes.

Slots

Name	Description
Default	The default slot for badge text, commonly a name or initials.

Parts

Name	Description
control	The element representing the badge, which wraps the default slot.

Events fired

This component doesn't fire any events.

Events listened to

This component doesn't listen to any events.