Components

A alert displays an important, succinct message, and provides actions for users to address (or dismiss the alert).

Buttons

Alerts can include a button level 3 that lets users interact with them. Taking action on these notifications should be optional and should not block the user from continuing with their current task.

Update available

A new package update is available. See what’s new in version 0.3.

<NVAlert Close Permanent Color="primary">
  <NVText Size="sm" Medium MB="1">Update available</NVText>
  <NVText Size="sm" MB="2">A new package update is available. See what’s new in version 0.3.</NVText>
  <NVStack Gutter="3">
     <NVButton Level="3">View </NVButton>
     <NVButton Level="3">Edit </NVButton>
  </NVStack>
</NVAlert>

<div class="nv-alert nv-panel nv-panel-level-1 primary">
  <i class="nv-alert-icon nv-icon nv-icon-speakerphone nv-icon-sm"></i>
  <div class="nv-alert-content">
    <p class="nv-text text-sm font-medium mb-1">Update available</p>
    <p class="nv-text text-sm font-normal mb-2">A new package update is available. See what’s new in version 0.3.</p>
    <div class="nv-stack gutter-x-3">
      <button class="nv-btn nv-btn-level-3 nv-btn-md neutral">View</button>
      <button class="nv-btn nv-btn-level-3 nv-btn-md neutral">Edit</button>
    </div>
  </div>
  <div class="nv-alert-actions">
    <button class="nv-btn nv-btn-xs nv-btn-icon nv-btn-level-3">
      <i class="nv-icon nv-icon-x"></i>
    </button>
  </div>
</div>

Buttons

On this page