ImageBadge

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

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>
        <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" />
        </div>
    </>
);

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="" />
        </ImageOverlay>
    </>
);

export default Example;