Alert

export default function AlertNeutral() {
  return (
    <div
      role="alert"
      className="bg-neutral-100 max-w-[600px] shadow-md pr-2 pl-4 ring-1 ring-neutral-300 typography-text-sm md:typography-text-base py-1 rounded-md"
    >
      <p className="py-2">Happy shopping!</p>
    </div>
  );
}

import { SfIconCheckCircle, SfIconClose } from '@storefront-ui/react';

export default function AlertPositive() {
  return (
    <div
      role="alert"
      className="flex items-start md:items-center max-w-[600px] shadow-md bg-positive-100 pr-2 pl-4 ring-1 ring-positive-200 typography-text-sm md:typography-text-base py-1 rounded-md"
    >
      <SfIconCheckCircle className="my-2 mr-2 text-positive-700 shrink-0" />
      <p className="py-2 mr-2">The product has been added to the cart.</p>
      <button
        type="button"
        className="p-1.5 md:p-2 ml-auto rounded-md text-positive-700 hover:bg-positive-200 active:bg-positive-300 hover:text-positive-800 active:text-positive-900 focus-visible:outline focus-visible:outline-offset"
        aria-label="Close positive alert"
      >
        <SfIconClose className="hidden md:block" />
        <SfIconClose size="sm" className="block md:hidden" />
      </button>
    </div>
  );
}

import { SfIconInfo } from '@storefront-ui/react';

export default function AlertSecondary() {
  return (
    <div
      role="alert"
      className="flex items-center max-w-[600px] shadow-md bg-secondary-100 pr-2 pl-4 ring-1 ring-secondary-200 typography-text-sm md:typography-text-base py-1 rounded-md"
    >
      <SfIconInfo className="mr-2 text-secondary-700 shrink-0" />
      <p className="py-2">Your cart will soon be full.</p>
    </div>
  );
}

import { SfIconWarning } from '@storefront-ui/react';

export default function AlertWarning() {
  return (
    <div
      role="alert"
      className="flex items-start max-w-[600px] shadow-md bg-warning-100 pr-2 pl-4 ring-1 ring-warning-200 typography-text-sm md:typography-text-base py-1 rounded-md"
    >
      <SfIconWarning className="mt-2 mr-2 text-warning-700 shrink-0" />
      <div className="py-2 mr-2">
        <p className="font-medium typography-text-base md:typography-text-lg">Your account</p>
        <p>Your shipping details need to be updated.</p>
      </div>
      <button
        type="button"
        className="py-1.5 px-3 md:py-2 md:px-4 rounded-md text-warning-700 hover:bg-warning-200 active:bg-warning-300 hover:text-warning-800 active:text-warning-900 ml-auto font-medium focus-visible:outline focus-visible:outline-offset"
      >
        Update
      </button>
    </div>
  );
}

import { SfIconClose } from '@storefront-ui/react';

export default function AlertError() {
  return (
    <div
      role="alert"
      className="flex items-start md:items-center max-w-[600px] shadow-md bg-negative-100 pr-2 pl-4 ring-1 ring-negative-300 typography-text-sm md:typography-text-base py-1 rounded-md"
    >
      <p className="py-2 mr-2">The password change was failed.</p>
      <button
        type="button"
        className="py-1.5 px-3 md:py-2 md:px-4 rounded-md text-negative-700 hover:bg-negative-200 active:bg-negative-300 hover:text-negative-800 active:text-negative-900 ml-auto font-medium focus-visible:outline focus-visible:outline-offset"
      >
        Retry
      </button>
      <button
        type="button"
        className="p-1.5 md:p-2 ml-2 rounded-md text-negative-700 hover:bg-negative-200 active:bg-negative-300 hover:text-negative-800 active:text-negative-900 focus-visible:outline focus-visible:outline-offset"
        aria-label="Close error alert"
      >
        <SfIconClose className="hidden md:block" />
        <SfIconClose size="sm" className="block md:hidden" />
      </button>
    </div>
  );
}