Alert

import { Alert } from "@grassroot/ui-react";
 
<Alert title="Scheduled maintenance">
  Region us-east-1 has a maintenance window Sunday 02:00–04:00 UTC.
</Alert>
<Alert variant="success" title="Deploy succeeded">
  ledger-api v2.4.1 is live in prod. Health checks passed.
</Alert>
<Alert variant="error" title="Health check failed">
  analytics-ingest is returning 503s in us-west-2.
</Alert>

<script setup lang="ts">
import { Alert } from "@grassroot/ui-vue";
</script>
 
<template>
  <Alert
    title="Scheduled maintenance"
  >
    Region us-east-1 has a maintenance window Sunday 02:00–04:00 UTC.
  </Alert>
  <Alert
    variant="success"
    title="Deploy succeeded"
  >
    ledger-api v2.4.1 is live in prod. Health checks passed.
  </Alert>
  <Alert
    variant="error"
    title="Health check failed"
  >
    analytics-ingest is returning 503s in us-west-2.
  </Alert>
</template>

import { Component } from "@angular/core";
import { GrassrootAlert } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-example",
  standalone: true,
  imports: [GrassrootAlert],
  template: `
    <grassroot-alert
      title="Scheduled maintenance"
    >
      Region us-east-1 has a maintenance window Sunday 02:00–04:00 UTC.
    </grassroot-alert>
    <grassroot-alert
      variant="success"
      title="Deploy succeeded"
    >
      ledger-api v2.4.1 is live in prod. Health checks passed.
    </grassroot-alert>
    <grassroot-alert
      variant="error"
      title="Health check failed"
    >
      analytics-ingest is returning 503s in us-west-2.
    </grassroot-alert>
  `,
})
export class ExampleComponent {
}

<script lang="ts">
  import { Alert } from "@grassroot/ui-svelte";
</script>
 
<Alert
  title="Scheduled maintenance"
>
  Region us-east-1 has a maintenance window Sunday 02:00–04:00 UTC.
</Alert>
<Alert
  variant="success"
  title="Deploy succeeded"
>
  ledger-api v2.4.1 is live in prod. Health checks passed.
</Alert>
<Alert
  variant="error"
  title="Health check failed"
>
  analytics-ingest is returning 503s in us-west-2.
</Alert>

import { Alert } from "@grassroot/ui-solid";
 
export function Example() {
  return (
    <>
      <Alert
        title="Scheduled maintenance"
      >
        Region us-east-1 has a maintenance window Sunday 02:00–04:00 UTC.
      </Alert>
      <Alert
        variant="success"
        title="Deploy succeeded"
      >
        ledger-api v2.4.1 is live in prod. Health checks passed.
      </Alert>
      <Alert
        variant="error"
        title="Health check failed"
      >
        analytics-ingest is returning 503s in us-west-2.
      </Alert>
    </>
  );
}