Skip to content

ZAlert

Alert messages for user feedback

Example

ℹ️ This is an info alert

Import

tsx
import { ZAlert } from "zurto-ui";

Usage

tsx
import { ZAlert } from "zurto-ui";

function Example() {
  return (
    <>
      <ZAlert type="info">This is an info alert</ZAlert>
      <ZAlert type="success">Success! Your changes have been saved.</ZAlert>
      <ZAlert type="error">Error: Something went wrong.</ZAlert>
    </>
  );
}

Props

| Prop | Type | Default | Description | | ---------- | ------------ | --------- | ----------------- | -------- | -------- | ---------- | | type | 'info' | 'success' | 'warning' | 'error' | 'info' | Alert type | | title | string | - | Alert title | | closable | boolean | false | Show close button | | onClose | () => void | - | Close handler |

Accessibility

  • ✅ Keyboard navigation support
  • ✅ ARIA attributes included
  • ✅ Screen reader friendly
  • ✅ Focus management

Released under the MIT License.