\

Modal

IN PROGRESS

Modal

Contact us
Contact us

usage guidelines

Interactions with a modal should be straightforward and intuitive. Animations can be used to smoothly transition the modal onto and off the screen, enhancing the user experience without causing distractions. Subtle fade or slide effects are commonly used to bring the modal into focus and to signal its dismissal.

Focused Content and Clear Calls-to-Action

Utilize modals for important interactions that require user focus, ensuring they contain concise content and clear calls-to-action.

Easy Dismissal and Non-Obtrusive Design

Design modals to be easily dismissible, either by a close button or clicking outside the modal area, and ensure they don't obstruct essential content.

Accessibility and Keyboard Support

Ensure modals are accessible, with focus management, screen reader support, and keyboard navigability for an inclusive user experience.

accessibility standards

Interactions with a modal should be straightforward and intuitive. Animations can be used to smoothly transition the modal onto and off the screen, enhancing the user experience without causing distractions. Subtle fade or slide effects are commonly used to bring the modal into focus and to signal its dismissal.

content standards

Interactions with a modal should be straightforward and intuitive. Animations can be used to smoothly transition the modal onto and off the screen, enhancing the user experience without causing distractions. Subtle fade or slide effects are commonly used to bring the modal into focus and to signal its dismissal.

interaction and animation

Interactions with a modal should be straightforward and intuitive. Animations can be used to smoothly transition the modal onto and off the screen, enhancing the user experience without causing distractions. Subtle fade or slide effects are commonly used to bring the modal into focus and to signal its dismissal.

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