usage guidelines

The interaction with tabs should be immediate and responsive. Animations can be used to enhance the user experience, such as a fade or slide transition when switching between tab panes. These animations should be quick and smooth, providing a seamless transition without causing a delay in content accessibility.

Clear Labeling and Logical Ordering

Design tabs with descriptive labels, and order them logically to facilitate intuitive navigation through different content areas.

Active State Visibility and Consistent Styling

Ensure the active tab is distinctly visible, and maintain consistent styling across all tabs for cohesive user experience.

Accessibility and Keyboard Functionality

Implement tabs with accessibility in mind, including keyboard navigability and proper ARIA roles to ensure usability for all users.

accessibility standards

The interaction with tabs should be immediate and responsive. Animations can be used to enhance the user experience, such as a fade or slide transition when switching between tab panes. These animations should be quick and smooth, providing a seamless transition without causing a delay in content accessibility.

content standards

The interaction with tabs should be immediate and responsive. Animations can be used to enhance the user experience, such as a fade or slide transition when switching between tab panes. These animations should be quick and smooth, providing a seamless transition without causing a delay in content accessibility.

interaction and animation

The interaction with tabs should be immediate and responsive. Animations can be used to enhance the user experience, such as a fade or slide transition when switching between tab panes. These animations should be quick and smooth, providing a seamless transition without causing a delay in content accessibility.

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