Alert

<arc-alert variant="success" heading="Deployment complete" dismissible>
  Your changes are now live on production.
</arc-alert>

<!-- tip: advice, not a status. Absorbed from arc-callout. -->
<arc-alert variant="tip" heading="Faster builds">
  Add a <code>.arcignore</code> to skip files the bundler never reads.
</arc-alert>

<!-- info is role="note" and is not announced. Say so when it should be. -->
<arc-alert variant="info" live="polite" density="compact">
  <arc-icon slot="icon" name="sparkle"></arc-icon>
  Draft saved.
</arc-alert>

import { Alert } from '@arclux/arc-ui-react';

export default function Example() {
  return (
    <Alert variant="success" heading="Deployment complete" dismissible>
      Your changes are now live on production.
    </Alert>
  );
}

<script setup>
import { Alert } from '@arclux/arc-ui-vue';
</script>

<template>
  <Alert variant="success" heading="Deployment complete" dismissible>
    Your changes are now live on production.
  </Alert>
</template>

<script>
  import { Alert } from '@arclux/arc-ui-svelte';
</script>

<Alert variant="success" heading="Deployment complete" dismissible>
  Your changes are now live on production.
</Alert>

import { Component } from '@angular/core';
import { Alert } from '@arclux/arc-ui-angular';

@Component({
  imports: [Alert],
  template: `
    <arc-alert variant="success" heading="Deployment complete" dismissible>
      Your changes are now live on production.
    </arc-alert>
  `,
})
export class MyComponent {}

import { Alert } from '@arclux/arc-ui-solid';

export default function Example() {
  return (
    <Alert variant="success" heading="Deployment complete" dismissible>
      Your changes are now live on production.
    </Alert>
  );
}

import { Alert } from '@arclux/arc-ui-preact';

export default function Example() {
  return (
    <Alert variant="success" heading="Deployment complete" dismissible>
      Your changes are now live on production.
    </Alert>
  );
}

<!-- arc-alert is interactive — requires JS -->
<arc-alert></arc-alert>

<!-- arc-alert is interactive — requires JS -->
<arc-alert></arc-alert>