• Start

  • Blogg

  • Kom igång

  • Riktlinjer

  • Komponenter

  • Changelog

  • Tillgänglighet

  • Statistik

  • Inställningar

Komponenter

Komponenter

​
​

Inga resultat hittade, prova med andra sökvillkor.

Badge

Badge

9.4.0

Badges are small status descriptors for UI elements. A badge usually consists of a small circle that appears in proximity to another object.

Demo
Props
Installation
Länkar
Tillgänglighet
Change log
Statistik

Demo

Props

Se fullständing dokumentation(öppnas i ny flik)
NamnTypBeskrivning

ariaHidden

booleanIf true, the badge's label will be hidden from screen readers while remaining visually visible.

customAttribute

{ attribute: string; value: string | number }Used for tests. Clickable and requested subcomponents will be suffixed with "-[ComponentName]".

isLoading

booleanIf true, a loading skeleton will be rendered instead of the component.

negativeMargins

booleanNegative margins.

Installation

Kodexempel
npm install @sj-ab/component-library.ui.badge

Länkar

  • Storybook

  • Figma

  • Bit.cloud

Tillgänglighet

Semantik

En Badge presenteras som vanlig text (<span>).

Färg som komplement

Se till att informationen som presenteras i en Badge går att förstå även för användare som inte kan se eller urskilja den färgade cirkeln.

Gul cirkel med text "45 min"

Använd inte färgen i sig för att förmedla viktig information, till exempel förseningar

Gul cirkel med text "Försenad"

Använd den färgade cirkeln som komplement och förstärkning för den synliga texten

Change log

  • Updated design token colors

    9.4.0
  • Fix DataGrid accessibility issues

    9.3.1
  • Scrollable container imported packages for sideeffects

    9.3.0
  • New ScrollableContainer

    9.3.0
  • Fix accessibility issue in TravelTime

    9.2.0

Statistik