Color Badge

<sw-color-badge>

ready
Renders a colored badge for example as indicator if an item is available.

Usage

Loading...
<div>
    <!-- red square -->
    <sw-color-badge color="red"></sw-color-badge>
    <!-- green square -->
    <sw-color-badge color="green"></sw-color-badge>
    <!-- red circle -->
    <sw-color-badge color="red" rounded></sw-color-badge>
</div>

Component properties

Property name Type Default
variant String default
color String
rounded Boolean false

Imports

  • ./sw-color-badge.html.twig
  • ./sw-color-badge.scss

SASS variables

Variable name Value
$sw-color-badge-color-fallback $color-steam-cloud ($color-gray-300)
$sw-color-badge-color-warning $color-pumpkin-spice ($color-pumpkin-spice-500)
$sw-color-badge-color-error $color-crimson ($color-crimson-500)
$sw-color-badge-color-success $color-emerald ($color-emerald-500)
$sw-color-badge-color-info $color-shopware-blue ($color-shopware-brand-500)

Twig blocks

  • sw_color_badfge_slot_default
  • sw_color_badge

Slots

  • default