Skip to content

Latest commit

 

History

History
83 lines (59 loc) · 1.78 KB

badge.spec.md

File metadata and controls

83 lines (59 loc) · 1.78 KB

fast-badge

Overview

Badge component is used to highlight an item and attract attention or flag status, such as “New”, “Sale”, or other short phrases or a number to represent unread messages, updates available, etc..

Use Cases

Typical use cases include, but are not limited to, denoting a sale or new item, flagging an item as part of a category or representing a value of unread messages.

Features

A badge should allow the following properties:

  • fill, a string that maps to author defined variables.
  • circular, if circular styling is desired.

Prior Art/Examples

API

Component name:

  • fast-badge

Attributes:

  • fill: string
  • circular: boolean

Slots:

  • default

Anatomy and Appearance

Template:

<slot></slot>

Implementation

fast-badge {
   --badge-fill-primary: rgba(255, 0, 0, 1);
   --badge-fill-secondary: #00FF00;
   --badge-fill-transparent: transparent;
}
<fast-badge
    fill="primary"
>
    New
</fast-badge>
<fast-badge
    fill="secondary"
    circular=true
>
    99
</fast-badge>

Accessibility

Ensure text meets WCAG 2.1 color contrast against background.

Globalization

Badge should mirror in RTL languages, meaning the badge should flip to the other side of the item it is labeling.

Dependencies

No dependencies outside of fast-element itself.