Badge

A badge is a visual status indicator or description of an associated component.

Use cases:

• highlighting an item
• flagging an item as part of a category
• showing the number of unread messages

Example

This simple example shows a rectangular badge with text in light against a primary (green) background.

JD

React

Declaration

<rapid-badge></rapid-badge>

Usage

@customElement({
  name: 'my-element',
  template: html`
    <rapid-badge fill="primary" color="light">JD</rapid-badge>
  `,
})
export class MyElement extends GenesisElement {
}

Genesis

Declaration

<Badge></Badge>

Usage

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

export function MyComponent() {
  return (
    <Badge fill="primary" color="light">JD</Badge>
  );
}

Angular

Declaration

  <rapid-badge></rapid-badge>

Usage

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@Component({
  selector: 'my-root',
  template: `
        <rapid-badge fill="primary" color="light">JD</rapid-badge>
      `,
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
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
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

There are no properties. This component is controlled by 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.