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

Dark with color icon
Dark with icon
Light with icon
With band light color
With custom color
import React from 'react';
import { ImageBadge } from 'seduo-ui';

const Example = () => (
        <div className="d-flex p-5 mb-5">
            <ImageBadge text="Dark" theme="dark" />
            <ImageBadge icon="webinar" text="Dark with color icon" color="danger" theme="dark" />
            <ImageBadge icon="education" text="Dark with icon" theme="dark" />
        <div className="d-flex bg-brand-dark p-5">
            <ImageBadge text="Light" />
            <ImageBadge icon="webinar" text="Light with icon" color="danger" />
            <ImageBadge icon="education" text="With band light color" color="brand-light" />
            <ImageBadge icon="education" text="With custom color" hex="#97ebdb" />

export default Example;


    text: string;
    theme?: 'dark' | 'light';
    icon?: 'education' | 'webinar'; // only icons with prefix Badge<name>.svg
    color?: string;
    hex?: string;
    className?: string;

Usage composition

import React from 'react';
import { ImageBadge, Image, ImageOverlay } from 'seduo-ui';

const Example = () => (
        <ImageOverlay topRight={<ImageBadge text="badge" />}>
            <Image src="" alt="" />

export default Example;