Svelte Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible Svelte alerts.


Examples

  
  <BaseAlert dismissible={false} type="default">
    <strong>Default!</strong>
    This is a default alert—check it out!
  </BaseAlert>
  
  <BaseAlert dismissible={false} type="primary">
    <strong>Primary!</strong>
    This is a primary alert—check it out!
  </BaseAlert>
  
  <BaseAlert dismissible={false} type="secondary">
    <strong>Secondary!</strong>
    This is a secondary alert—check it out!
  </BaseAlert>
  
  <BaseAlert dismissible={false} type="info">
    <strong>Info!</strong>
    This is a info alert—check it out!
  </BaseAlert>
  
  <BaseAlert dismissible={false} type="success">
    <strong>Success!</strong>
    This is a success alert—check it out!
  </BaseAlert>
  
  <BaseAlert dismissible={false} type="danger">
    <strong>Danger!</strong>
    This is a danger alert—check it out!
  </BaseAlert>
  
  <BaseAlert dismissible={false} type="warning">
    <strong>Warning!</strong>
    This is a warning alert—check it out!
  </BaseAlert>
  

With icon

<BaseAlert dismissible={false} type="warning" icon="ni ni-like-2">
  <strong>Default!</strong>
  This is a warning alert—check it out!
</BaseAlert>

Dismissing

  
  <BaseAlert dismissible={true} type="default" icon="ni ni-like-2">
    <strong>Default!</strong>
    This is a default alert—check it out!
  </BaseAlert>
  
  <BaseAlert dismissible={true} type="primary" icon="ni ni-like-2">
    <strong>Primary!</strong>
    This is a primary alert—check it out!
  </BaseAlert>
  
  <BaseAlert dismissible={true} type="secondary" icon="ni ni-like-2">
    <strong>Secondary!</strong>
    This is a secondary alert—check it out!
  </BaseAlert>
  
  <BaseAlert dismissible={true} type="info" icon="ni ni-like-2">
    <strong>Info!</strong>
    This is a info alert—check it out!
  </BaseAlert>
  
  <BaseAlert dismissible={true} type="success" icon="ni ni-like-2">
    <strong>Success!</strong>
    This is a success alert—check it out!
  </BaseAlert>
  
  <BaseAlert dismissible={true} type="danger" icon="ni ni-like-2">
    <strong>Danger!</strong>
    This is a danger alert—check it out!
  </BaseAlert>
  
  <BaseAlert dismissible={true} type="warning" icon="ni ni-like-2">
    <strong>Warning!</strong>
    This is a warning alert—check it out!
  </BaseAlert>