Feedback

Alert

An alert is a non-modal dialog that informs   users without blocking access to the page, allowing continued interaction.

View Figma UI Kit

View GitHub repo

WCAG 2.1 accessibility compliant

With Border

This is a generic alert

This is an information alert

This is a success alert

This is a warning alert

This is an error alert

No Border

This is a generic alert

This is an information alert

This is a success alert

This is a warning alert

This is an error alert

React Native

    <Alert
        icon={OctagonAlert}
        variant='error'
        className='max-w-xl'
        role='alert'
        aria-label='Error alert'
      >
        <AlertDescription style={{ fontFamily: 'Inter' }}>
          This is some body copy
        </AlertDescription>
      </Alert>

      <Alert
        icon={AlertTriangle}
        variant='warning'
        className='max-w-xl'
        role='alert'
        aria-label='Warning alert'
      >
        <AlertDescription style={{ fontFamily: 'Inter' }}>
          This is some body copy
        </AlertDescription>
      </Alert>

      <Alert
        icon={CircleCheck}
        variant='success'
        className='max-w-xl'
        role='status'
        aria-live='polite'
        aria-label='Success alert'
      >
        <AlertDescription style={{ fontFamily: 'Inter' }}>
          This is some body copy
        </AlertDescription>
      </Alert>

      <Alert
        icon={Info}
        variant='info'
        className='max-w-xl'
        role='status'
        aria-live='polite'
        aria-label='Information alert'
      >
        <AlertDescription style={{ fontFamily: 'Inter' }}>
          This is some body copy
        </AlertDescription>
      </Alert>

      <Alert
        icon={Sun}
        variant='default'
        className='max-w-xl'
        role='status'
        aria-label='Default alert'
      >
        <AlertDescription style={{ fontFamily: 'Inter' }}>
          This is some body copy
        </AlertDescription>
      </Alert>

WCAG 2.1 accessibility checks

1.3.1 Info and Relationships (Level A)

1.4.3 Contrast (Minimum) (Level AA)

2.4.6 Headings and Labels (Level AA)

4.1.2 Name, Role, Value (Level A)

4.1.3 Status Messages (Level AA)

Select Card

Badge