Agnostic

Alerts

Alerts provide contextual notifications or messages with timely information.

Examples

Usage

astro logo

React, Vue, and Svelte examples on a single playground page 🚀 💥

codesandbox logo View in CodeSandbox Stackblitz logo View in Stackblitz

react logoReact

View source
import 'agnostic-react/dist/common.min.css';
import 'agnostic-react/dist/esm/index.css';
import { Alert } from 'agnostic-react';

const alertMessage = 'Alerts should be used for timely information.';

const getColor = (type) => {
  switch (type) {
    case 'warning':
      return 'var(--agnostic-warning-border-accent)';
    case 'info':
      return 'var(--agnostic-primary-dark)';
    case 'success':
      return 'var(--agnostic-action-dark)';
    case 'error':
      return 'var(--agnostic-error-dark)';
    default:
      return 'var(--agnostic-gray-mid-dark)';
  }
};

const DemoIcon = ({ type, utilityClasses }) => {
  return (
    <svg
      className={utilityClasses}
      style={{ color: getColor(type) }}
      xmlns="http://www.w3.org/2000/svg"
      height="24"
      viewBox="0 0 24 24"
      width="24"
    >
      <path d="M0 0h24v24H0z" fill="none" />
      <path fill="currentColor" d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" />
    </svg>
  );
};

export const YourComponent = () => (
  <>
    <Alert>{ alertMessage }</Alert>
    <div class="mbe16" />
    <Alert isRounded>{ alertMessage }</Alert>
    <div class="mbe16" />
    <Alert isBorderAll>Border all</Alert>
    <div class="mbe16" />
    <Alert isBorderLeft>Border left</Alert>
    <div class="mbe16" />
    <Alert type="dark">
      <DemoIcon type="dark" utilityClasses="mie8" />
      <p className='flex-fill'>{ alertMessage }</p>
    </Alert>
    <div class="mbe16" />
    <Alert type="success">
      <DemoIcon type="success" utilityClasses="mie8" />
      <p className='flex-fill'>{ alertMessage }</p>
    </Alert>
    <div class="mbe16" />
    <Alert type="info">
      <DemoIcon type="info" utilityClasses="mie8" />
      <p className='flex-fill'>{ alertMessage }</p>
    </Alert>
    <div class="mbe16" />
    <Alert type="warning">
      <DemoIcon type="warning" utilityClasses="mie8" />
      <p className='flex-fill'>{ alertMessage }</p>
    </Alert>
    <div class="mbe16" />
    <Alert type="error">
      <DemoIcon type="error" utilityClasses="mie8" />
      <p className='flex-fill'>{ alertMessage }</p>
    </Alert>
  </>
);

React: component source, storybook tests

Vue 3 logoVue 3

View source
<template>
  <div class="mbs12 mbe16">
    <Alert>Default</Alert>
  </div>
  <div class="mbs12 mbe16">
    <Alert isRounded>Rounded</Alert>
  </div>
  <div class="mbs12 mbe16">
    <Alert isBorderAll>Border all</Alert>
  </div>
  <div class="mbs12 mbe16">
    <Alert isBorderLeft>Border left</Alert>
  </div>
  <div class="mbs12 mbe16">
    <Alert type="success">
      <IconExample
        icon-type="success"
        utility-classes="mie8"
      >
        <template #icon />
      </IconExample>
      <p class="flex-fill">
        Success alert with projected icon
      </p>
    </Alert>
  </div>
  <div class="mbs12 mbe16">
    <Alert type="info">
      <IconExample
        icon-type="info"
        utility-classes="mie8"
      >
        <template #icon />
      </IconExample>
      <p class="flex-fill">
        Info alert with projected icon
      </p>
    </Alert>
  </div>
  <div class="mbs12 mbe16">
    <Alert type="warning">
      <IconExample
        icon-type="warning"
        utility-classes="mie8"
      >
        <template #icon />
      </IconExample>
      <p class="flex-fill">
        Warning alert with projected icon
      </p>
    </Alert>
  </div>
  <div class="mbs12 mbe16">
    <Alert type="error">
      <IconExample
        icon-type="error"
        utility-classes="mie8"
      >
        <template #icon />
      </IconExample>
      <p class="flex-fill">
        Error alert with projected icon
      </p>
    </Alert>
  </div>
</template>

<script setup>
import "agnostic-vue/dist/index.css";
import { Alert } from "agnostic-vue";
import IconExample from "./IconExample.vue";
</script>

Vue 3: component source, storybook tests

Svelte logoSvelte

View source
<script>
  import 'agnostic-svelte/css/common.min.css';
  import { Alert } from 'agnostic-svelte';
  import IconExample from "./path/to/components/IconExample.svelte";
  let alertMessage = "Alerts should be used for timely information.";
</script>
<section>
  <Alert>{alertMessage}</Alert>
  <div class="mbe16" />
  <Alert>{ alertMessage }</Alert>
  <div class="mbe16" />
  <Alert isRounded>{ alertMessage }</Alert>
  <div class="mbe16" />
  <Alert isBorderAll>Border all</Alert>
  <div class="mbe16" />
  <Alert isBorderLeft>Border left</Alert>
  <div class="mbe16" />
  <Alert type="success">
    <IconExample type="success" utilityClasses="mie8" />
    <p>{alertMessage}</p>
  </Alert>
  <div class="mbe16" />
  <Alert type="info">
    <IconExample type="info" utilityClasses="mie8" />
    <p>{alertMessage}</p>
  </Alert>
  <div class="mbe16" />
  <Alert type="warning">
    <IconExample type="warning" utilityClasses="mie8" />
    <p>{alertMessage}</p>
  </Alert>
  <div class="mbe16" />
  <Alert type="error">
    <IconExample type="error" utilityClasses="mie8" />
    <p>{alertMessage}</p>
  </Alert>
</section>

Svelte: component source, storybook tests

Angular logoAngular (Experimental)

View source

In your Angular configuration (likely angular.json) ensure you're including the common AgnosticUI styles:

"styles": ["agnostic-angular/common.min.css"],

Add AgnosticUI's AgModule module:



 





 









import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AgModule } from 'agnostic-angular';

import { AppComponent } from './app.component';

// Add your icon component to your app's module (this is just one
// way to do this; ultimately you're just projecting an icon)
import { IconExampleComponent } from './iconex.component';

@NgModule({
  declarations: [AppComponent, IconExampleComponent],
  imports: [BrowserModule, AgModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Now you can use in your components:

import { Component } from '@angular/core';

@Component({
  selector: 'your-component',
  template: `<section>
    <div class="mbe16">
      <ag-alert>This is an alert</ag-alert>
    </div>
    <div class="mbe16">
      <ag-alert [isRounded]="true">This is an alert</ag-alert>
    </div>
    <div class="mbe16">
      <ag-alert [isBorderAll]="true">This is an alert</ag-alert>
    </div>
    <div class="mbe16">
      <ag-alert [isRounded]="true"
                [isBorderAll]="true">This is an alert</ag-alert>
    </div>
    <div class="mbe16">
      <ag-alert [isBorderLeft]="true">This is an alert</ag-alert>
    </div>
    <div class="mbe16">
      <ag-alert [isBorderLeft]="true"
                type="success">
        <ag-example-icon iconType="success"
                         utilityClasses="mie12"></ag-example-icon>
        <p class="flex-fill">Success alert w/projected icon</p>
      </ag-alert>
    </div>
    <div class="mbe16">
      <ag-alert [isBorderLeft]="true"
                type="info">
        <ag-example-icon iconType="info"
                         utilityClasses="mie12"></ag-example-icon>
        <p class="flex-fill">Info alert w/projected icon</p>
      </ag-alert>
    </div>
    <div class="mbe16">
      <ag-alert [isBorderLeft]="true"
                type="warning">
        <ag-example-icon iconType="warning"
                         utilityClasses="mie12"></ag-example-icon>
        <p class="flex-fill">Warning alert w/projected icon</p>
      </ag-alert>
    </div>
    <div class="mbe16">
      <ag-alert [isBorderLeft]="true"
                type="error">
        <ag-example-icon iconType="error"
                         utilityClasses="mie12"></ag-example-icon>
        <p class="flex-fill">Error alert w/projected icon</p>
      </ag-alert>
    </div>
  </section>`,
})
export class YourComponent { //... }

Angular: component source, storybook tests

Storybook

You can run the framework Storybooks and see live examples for React, Vue 3, Svelte, Astro, and Angular (experimental). The following will set up Storybook and run locally:

How to run Storybook
git clone git@github.com:AgnosticUI/agnosticui.git
cd agnosticui/<PACKAGE_NAME> && npm i # e.g. cd agnosticui/agnostic-react && npm i
npm run storybook

See Running Storybook.