Status Pill

The status-pill component shows a message or a countdown with a svg icon or initial in a rounded container. The background color can be configured via attributes.

Use cases:

• Highlighting state
• Showing a countdown
• Useful for distinguishing enumerated values

Example

React

Declaration

<rapid-status-pill></rapid-status-pill>

Usage

@customElement({
name: 'my-element',
template: html`
    <rapid-status-pill
      icon-name="check"
      text="Success"
      background-color="green"
    >
    </rapid-status-pill>
    <rapid-status-pill
      icon-name="xmark"
      text="Failure"
      background-color="red"
    >
    </rapid-status-pill>
    <rapid-status-pill
      icon-initial="S"
      text="Live"
      icon-initial-background-color="#0c52b9"
      background-color="#547cb6"
    >
    </rapid-status-pill>
    <rapid-status-pill
      icon-initial="S"
      icon="clock"
      text="Market expires in"
      background-color="#9c851b"
      date-countdown=${x => x.fiveMinutesTimeInMiliseconds}
    >
    </rapid-status-pill>
  `,
})
export class MyElement extends GenesisElement {
@observable fiveMinutesTimeInMiliseconds = Math.round(new Date().getTime() + 60000);
}

Genesis

Declaration

<StatusPill></StatusPill>

Usage

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

export function MyComponent() {
const fiveMinutesTimeInMiliseconds = Math.round(new Date().getTime() + 60000);

return (
  <>
    <StatusPill
      iconName="check"
      text="Success"
      backgroundColor="green"
    ></StatusPill>
    <StatusPill
    iconName="xmark"
    text="Failure"
    backgroundColor="red"
    ></StatusPill>
    <StatusPill
    iconInitial="S"
    text="Live"
    iconInitialBackgroundColor="#0c52b9"
    backgroundColor="#547cb6"
    ></StatusPill>
    <StatusPill
    icon="clock"
    text="Market expires in"
    backgroundColor="#9c851b"
    dateCountdown={fiveMinutesTimeInMiliseconds}
    ></StatusPill>
  </>
);
}

Angular

Declaration

<rapid-status-pill></rapid-status-pill>

Usage

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@Component({
selector: 'my-root',
template: `
  <rapid-status-pill
    icon-name="check"
    text="Success"
    background-color="green"
  >
  </rapid-status-pill>
  <rapid-status-pill
    icon-name="xmark"
    text="Failure"
    background-color="red"
  >
  </rapid-status-pill>
  <rapid-status-pill
    icon-initial="S"
    text="Live"
    icon-initial-background-color="#0c52b9"
    background-color="#547cb6"
  >
  </rapid-status-pill>
  <rapid-status-pill
    icon="clock"
    text="Market expires in"
    background-color="#9c851b"
    [date-countdown]=fiveMinutesTimeInMiliseconds
  >
  </rapid-status-pill>
  `,
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppComponent {
  fiveMinutesTimeInMiliseconds = Math.round(new Date().getTime() + 60000);
}

API

Attributes

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

Name	Type	Description	Example
background-color	string	The fill color of the pill. Use a valid color, rgba, rgb or hex value.	<rapid-status-pill background-color="#547cb6">
icon-name	string	The name of the icon (matching with the name in fontawesome).	<rapid-status-pill icon-name="check">
icon-src	string	A URL for an image asset to be used.	<rapid-status-pill icon-src="/logos/custom-image.svg"">
icon-initial	string	Display a single letter at the start of the pill. Note, will only display the first character of the string.	<rapid-status-pill icon-initial="S">
icon-initial-background-colorl	string	The fill color of the icon-initial, if the icon-initial is set. Use a valid color, rgba, rgb or hex value.	<rapid-status-pill icon-initial-background-color="red">
icon-size	"2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "1x" | "2x" | "3x" | "4x" | "5x" | "6x" | "7x" | "8x" | "9x" | "10x"	Controls the size of the icon in the pill. Default: "sm"	<rapid-status-pill icon-size="xl">
text-color	string	The text color in the pill. Use a valid color, rgba, rgb or hex value. Note, this will be applied to the icon as well.	<rapid-status-pill text-color="red">
text	string	The text in the pill	<rapid-status-pill text="Settled">
date-countdown	number	An epoch timestamp value which will create a countdown in hours, minutes and seconds. If the timestamp is in the past an expired message will show.	<rapid-status-pill date-countdown="1751550867041">
date-countdown-completed-message	string	A message that is shown when the countdown, if present and completed, is shown. Default 'Expired'	<rapid-status-pill date-countdown-completed-message="Market Closed">

Properties

This component doesn't have any properties.

Slots

This component doesn't have any slots.

Parts

Name	Description
status-pill	The element containing icons, images and text. If you using a large enough icon, you will need to increase the height. Ensure the border radius is exactly half the specified height to achieve rounded corners.

Events fired

This component doesn't fire any events.

Events listened to

This component doesn't listen to any events.