\

Badge

in development

Badge

V.23

LIVE

V.23

IN PROGRESS

ARCHIVED

V.23

LIVE

V.23

IN PROGRESS

ARCHIVED

usage guidelines

Badges can gently pulse or change color to draw attention when updated.

Placement

Badges are generally placed in the upper right corner of icons or buttons to ensure visibility without obstructing the main content.

Size and Content

Keep the badge size proportional to the element it's associated with. The content inside a badge should be concise, typically a number or a short word.

Color and Style

Use colors that contrast well with the background element to ensure readability. Style the badge to match the overall design language of your application or website.

accessibility standards

Badges can gently pulse or change color to draw attention when updated.

content standards

Badges can gently pulse or change color to draw attention when updated.

interaction and animation

Badges can gently pulse or change color to draw attention when updated.

CODE

export const ToastNotification = () => {
  return (
    <StyledToastNotification>
      <div className="rectangle" />
      <div className="frame">
        <div className="frame-wrapper">
          <div className="div">
            <Icon
              className="icon-instance"
              icon={<FilledYesSize20 className="attributes-instance" color="#FF5900" />}
            />
            <div className="text-wrapper">BEEPBOOP</div>
          </div>
        </div>
      </div>
      <div className="icon-wrapper">
        <Icon className="icon-instance" icon={<FilledNoSize12 className="attributes-instance" color="#FF5900" />} />
      </div>
    </StyledToastNotification>
  );
};

CODESANDBOX

ZILKR DESIGN SYSTEM

© 2024 — ZILKR
All rights reserved

ZILKR DESIGN SYSTEM

© 2024 — ZILKR
All rights reserved

ZILKR DESIGN SYSTEM

© 2024 — ZILKR
All rights reserved