ImageBadge

Special type of badges, which can only be used in the ImageOverlay component.

Examples

import { ImageBadge } from "@seduo/design-system";
...
<ImageBadge icon="New" text="Badge" theme="dark" color="warning" />
<ImageBadge icon="Favorite" text="Badge" theme="dark" color="danger" />
<ImageBadge icon="BestSeller" text="Badge" theme="dark" color="success" />
<ImageBadge icon="Trending" text="Badge" theme="dark" color="warning" />
<ImageBadge icon="TopPrice" text="Badge" theme="dark" color="informative" />
<ImageBadge icon="Webinar" text="Badge" theme="dark" color="danger" />
<ImageBadge icon="Education" text="Badge" theme="dark" />
...
<ImageBadge icon="New" text="Badge" color="warning" />
<ImageBadge icon="Favorite" text="Badge" color="danger" />
<ImageBadge icon="BestSeller" text="Badge" color="success" />
<ImageBadge icon="Trending" text="Badge" color="warning" />
<ImageBadge icon="TopPrice" text="Badge" color="informative" />
<ImageBadge icon="Webinar" text="Badge" color="danger" />
<ImageBadge icon="Education" text="Badge" />

{% include "@seduo-design-system/imageBadge.twig" with { props: {
    theme: 'dark',
    text: 'Badge',
    color: 'warning',
    icon: 'New',
}} %}

<ImageBadge icon="New" text="Badge" theme="dark" color="warning" />
<ImageBadge icon="Favorite" text="Badge" theme="dark" color="danger" />
<ImageBadge icon="BestSeller" text="Badge" theme="dark" color="success" />
<ImageBadge icon="Trending" text="Badge" theme="dark" color="warning" />
<ImageBadge icon="TopPrice" text="Badge" theme="dark" color="informative" />
<ImageBadge icon="Webinar" text="Badge" theme="dark" color="danger" />
<ImageBadge icon="Education" text="Badge" theme="dark" />
...
<ImageBadge icon="New" text="Badge" color="warning" />
<ImageBadge icon="Favorite" text="Badge" color="danger" />
<ImageBadge icon="BestSeller" text="Badge" color="success" />
<ImageBadge icon="Trending" text="Badge" color="warning" />
<ImageBadge icon="TopPrice" text="Badge" color="informative" />
<ImageBadge icon="Webinar" text="Badge" color="danger" />
<ImageBadge icon="Education" text="Badge" />

Sizes

ImageBadges come in two different sizes: small and regular. The regular size is the default and most frequently used option. Use the other sizes sparingly.

examples

import { ImageBadge } from "@seduo/design-system";
...
<ImageBadge icon="FlashFilled" text="Badge" theme="dark" color="warning" />
<ImageBadge icon="FlashFilled" text="Badge" theme="dark" color="warning" size="small" />

{% include "@seduo-design-system/imageBadge.twig" with { props: {
    theme: 'dark',
    text: 'Badge',
    color: 'warning',
    icon: 'FlashFilled',
}} %}

{% include "@seduo-design-system/imageBadge.twig" with { props: {
    theme: 'dark',
    text: 'Badge',
    color: 'warning',
    size: 'small',
    icon: 'FlashFilled',
}} %}

<ImageBadge icon="FlashFilled" text="Badge" theme="dark" color="warning" />
<ImageBadge icon="FlashFilled" text="Badge" theme="dark" color="warning" size="small" />

API

Prop name	Type	Default	Required	Description
`text`	`string`	-	yes	text in badge
`theme`	Theme dictionary	`light`	no	badge theme
`icon`	`Education` , `Webinar`, `New` , `Favorite` , `TopPrice` , `BestSeller` , `Trending` and all icons from Icons Set	-	no	icon for allowed list
`color`	Emotion Color dictionary	-	no	possible emotion colors for icon
`size`	`medium`, `small`	`medium`	no	possible small and regular sizes
`hex`	`string`	-	no	custom colors for icon
`UNSAFE_className`	`string`	-	no	Wrapper custom class name

On this page