Support

Semantic color variations to communicate different states, priorities, and contextual meanings in user interfaces.

<nve-icon name="person"></nve-icon>
<nve-icon name="person" status="accent"></nve-icon>
<nve-icon name="person" status="success"></nve-icon>
<nve-icon name="person" status="warning"></nve-icon>
<nve-icon name="person" status="danger"></nve-icon>

Semantic color variations for general status communication, enabling clear visual distinction of different states and priorities.

<div nve-layout="row gap:md">
  <nve-dot></nve-dot>
  <nve-dot status="accent"></nve-dot>
  <nve-dot status="warning"></nve-dot>
  <nve-dot status="success"></nve-dot>
  <nve-dot status="danger"></nve-dot>
</div>

Support status badges for general feedback states. Use for success, warning, error, or informational messages.

<div nve-layout="row gap:md">
  <nve-badge status="accent">accent</nve-badge>
  <nve-badge status="warning">warning</nve-badge>
  <nve-badge status="success">success</nve-badge>
  <nve-badge status="danger">danger</nve-badge>
</div>

Alert status variants for semantic messaging. Use accent for informational updates, warning for cautionary messages requiring attention, success for confirmations, and danger for errors or critical issues that may block user progress.

<div nve-layout="column gap:md">
  <nve-alert>Standard</nve-alert>
  <nve-alert status="accent">Accent</nve-alert>
  <nve-alert status="warning">Warning</nve-alert>
  <nve-alert status="success">Success</nve-alert>
  <nve-alert status="danger">Danger</nve-alert>
</div>

Alert groups with inherited status styling for all children. Applying status at the group level ensures visual consistency across related messages, perfect for form validation where many fields share the same error context.

<div nve-layout="column gap:md">
  <nve-alert-group>
    <nve-alert>Standard</nve-alert>
    <nve-alert>Standard</nve-alert>
  </nve-alert-group>
  <nve-alert-group status="accent">
    <nve-alert>Accent</nve-alert>
    <nve-alert>Accent</nve-alert>
  </nve-alert-group>
  <nve-alert-group status="warning">
    <nve-alert>Warning</nve-alert>
    <nve-alert>Warning</nve-alert>
  </nve-alert-group>
  <nve-alert-group status="success">
    <nve-alert>Success</nve-alert>
    <nve-alert>Success</nve-alert>
  </nve-alert-group>
  <nve-alert-group status="danger">
    <nve-alert>Danger</nve-alert>
    <nve-alert>Danger</nve-alert>
  </nve-alert-group>
</div>

High-prominence alerts with emphasis styling for full-width banners. Use prominence="emphasis" for system-wide announcements like maintenance windows, feature launches, or critical security updates that need max visibility and impact across the entire interface.

<nve-page document-scroll>
  <nve-alert-group slot="header" prominence="emphasis" container="full">
    <nve-alert closable
      ><span slot="prefix">Standard</span> banner message
      <a href="#" nve-text="link" slot="actions">view details</a></nve-alert
    >
  </nve-alert-group>
  <nve-alert-group slot="header" status="accent" prominence="emphasis" container="full">
    <nve-alert closable
      ><span slot="prefix">Accent</span> banner message
      <a href="#" nve-text="link" slot="actions">view details</a></nve-alert
    >
  </nve-alert-group>
  <nve-alert-group slot="header" status="warning" prominence="emphasis" container="full">
    <nve-alert closable
      ><span slot="prefix">Warning</span> banner message
      <a href="#" nve-text="link" slot="actions">view details</a></nve-alert
    >
  </nve-alert-group>
  <nve-alert-group slot="header" status="success" prominence="emphasis" container="full">
    <nve-alert closable
      ><span slot="prefix">Success</span> banner message
      <a href="#" nve-text="link" slot="actions">view details</a></nve-alert
    >
  </nve-alert-group>
  <nve-alert-group slot="header" status="danger" prominence="emphasis" container="full">
    <nve-alert closable
      ><span slot="prefix">Danger</span> banner message
      <a href="#" nve-text="link" slot="actions">view details</a></nve-alert
    >
  </nve-alert-group>
</nve-page>

Notification status variants for different message types and severity levels. Use status to convey message importance: success for confirmations, warning for cautions, danger for errors, and accent for general information requiring attention.

<nve-notification-group position="center">
  <nve-notification>
    <h3 nve-text="label">Default</h3>
    <p nve-text="body">some text content in a notification</p>
  </nve-notification>
  <nve-notification status="accent">
    <h3 nve-text="label">Accent</h3>
    <p nve-text="body">some text content in a notification</p>
  </nve-notification>
  <nve-notification status="success">
    <h3 nve-text="label">Success</h3>
    <p nve-text="body">some text content in a notification</p>
  </nve-notification>
  <nve-notification status="warning">
    <h3 nve-text="label">Warning</h3>
    <p nve-text="body">some text content in a notification</p>
  </nve-notification>
  <nve-notification status="danger">
    <h3 nve-text="label">Danger</h3>
    <p nve-text="body">some text content in a notification</p>
  </nve-notification>
</nve-notification-group>

Toast status variants for different feedback types. Use success for confirmations, warning for cautions, and danger for error notifications, helping users quickly identify message importance through color and iconography.

<div nve-layout="row align:center" style="height: 200px">
  <nve-toast position="top">default</nve-toast>
  <nve-toast status="success" position="right">success</nve-toast>
  <nve-toast status="warning" position="bottom">warning</nve-toast>
  <nve-toast status="danger" position="left">danger</nve-toast>
</div>