Components

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

Close

Display the close button.

Type	Default Value
bool	null

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">A new package update is available.</NVText>
  <NVText Size="sm">See what’s new in version 0.3.</NVText>
</NVAlert>

<div class="nv-alert nv-panel nv-panel-level-1 gutter-x-3 primary p-4">
  <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">A new package update is available.</p>
    <p class="nv-text text-sm font-normal">See what’s new in version 0.3.</p>
  </div>
  <div class="nv-alert-actions">
    <button class="nv-btn nv-btn-level-3 nv-btn-icon nv-btn-xs">
      <i class="nv-icon nv-icon-x"></i>
    </button>
  </div>
</div>

<nv-alert permanent close color="primary">
  <nv-text size="sm" medium mb="1">
    A new package update is available.
  </nv-text>
  <nv-text size="sm">See what's new in version 0.3.
  </nv-text>
</nv-alert>

<NvAlert color="primary"  permanent>
  <NvText mb={1} medium size="sm">
    A new package update is available.
  </NvText>
  <NvText>
    See what’s new in version 0.3.
  </NvText>
</NvAlert>

Icon

Change icon of the Alert.
By default an icon is linked to colors : neutral (flag), primary (speakerphone), secondary ( info-circle), success (circle-check) and error (alert-circle).

Type	Default Value
string	null

custom icon

neutral - flag

primary - speakerphone

secondary - info-circle

success - circle-check

error - alert-circle

<NVBlock ChildMargin=". . 2">
  <NVAlert Icon="search" Permanent Color="neutral"> custom icon </NVAlert>
  <NVAlert Permanent Color="neutral"> neutral - flag </NVAlert>
  <NVAlert Permanent Color="primary"> primary - speakerphone </NVAlert>
  <NVAlert Permanent Color="secondary"> secondary - info-circle </NVAlert>
  <NVAlert Permanent Color="success"> success - circle-check </NVAlert>
  <NVAlert Permanent Color="error-100"> error - alert-circle </NVAlert>
</NVBlock>

<div class="cmb-2">
  <div class="nv-alert neutral nv-panel nv-panel-level-1">
    <i class="nv-alert-icon nv-icon nv-icon-search nv-icon-sm"></i>
    <div class="nv-alert-content">custom icon</div>
  </div>
  
  <div class="nv-alert neutral nv-panel nv-panel-level-1">
    <i class="nv-alert-icon nv-icon nv-icon-flag nv-icon-sm"></i>
    <div class="nv-alert-content">neutral - flag</div>
  </div>
    
  <div class="nv-alert primary nv-panel nv-panel-level-1">
    <i class="nv-alert-icon nv-icon nv-icon-speakerphone nv-icon-sm"></i>
    <div class="nv-alert-content">primary - speakerphone</div>
  </div>
  
  <div class="nv-alert secondary nv-panel nv-panel-level-1">
    <i class="nv-alert-icon nv-icon nv-icon-info-circle nv-icon-sm"></i>
    <div class="nv-alert-content">secondary - info-circle</div>
  </div>
  
  <div class="nv-alert success nv-panel nv-panel-level-1">
    <i class="nv-alert-icon nv-icon nv-icon-circle-check nv-icon-sm"></i>
    <div class="nv-alert-content">success - circle-check</div>
  </div>
  
  <div class="nv-alert error nv-panel nv-panel-level-1">
    <i class="nv-alert-icon nv-icon nv-icon-alert-circle nv-icon-sm"></i>
    <div class="nv-alert-content">error - alert-circle</div>
  </div>
</div>

<div style="display: flex; flex-direction: column; gap: 12px;">
<nv-alert permanent color="neutral" icon="search">Custom Icon</nv-alert>
<nv-alert permanent color="neutral">Neutral</nv-alert>
<nv-alert permanent color="primary">Primary</nv-alert>
<nv-alert permanent color="secondary">Secondary</nv-alert>
<nv-alert permanent color="success">Success</nv-alert>
<nv-alert permanent color="error">Error</nv-alert>
</div>

<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem'}}>
  <NvAlert color="neutral" icon="search" permanent> Custom Icon </NvAlert>
  <NvAlert color="neutral" permanent> Neutral </NvAlert>
  <NvAlert color="primary" permanent> Primary </NvAlert>
  <NvAlert color="secondary" permanent> Secondary </NvAlert>
  <NvAlert color="success" permanent> Success </NvAlert>
  <NvAlert color="error" permanent> Error </NvAlert>
</div>

Permanent

By default an alert is hidden. To display it wee need to set Permanent to True.

Type	Default Value
string	null

Alert Permanent

<NVAlert Color="primary"> Alert hidden </NVAlert>
<NVAlert Permanent Color="primary"> Alert Permanent </NVAlert>

<div class="nv-alert nv-panel nv-panel-level-1 gutter-x-3 primary p-4" style="display: none!important;">
  <i class="nv-alert-icon nv-icon nv-icon-speakerphone nv-icon-sm"></i>
  <div class="nv-alert-content">
    Alert hidden
  </div>
</div>
<div class="nv-alert nv-panel nv-panel-level-1 gutter-x-3 primary p-4">
  <i class="nv-alert-icon nv-icon nv-icon-speakerphone nv-icon-sm"></i>
  <div class="nv-alert-content">
    Alert Permanent
  </div>
</div>

<nv-alert color="primary">Hidden</nv-alert>
<nv-alert color="primary" permanent>Permanent</nv-alert>

<div style={{ display:'flex', flexDirection:'column', gap:'1rem'}}>
  <NvAlert color="primary"> Hidden </NvAlert>
  <NvAlert color="primary" permanent> Permanent </NvAlert>
</div>

Visible

Visible boolean let us to display or hide the alert with an animation.
The animation will be play when the value Visible change.
If on first rendering Visible is True, it act as Permanent boolean. The alert will be visible (no appearing animation is played).

Type	Default Value
bool	false

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

<NVButton Margin=". . 3" OnClick="@(()" => _toggle = !_toggle)>Toggle </NVButton>
<NVAlert Color="primary" @bind-Visible="@_toggle">Info</NVAlert>

@code{
  private bool _toggle = true;
}

<button class="nv-btn mb-3">Toggle</button>
<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">
    A new package update is available. <br>
    See what’s new in version 0.3.
  </div>
</div>

VisibleChanged

Used for the dual binding of Visible.
Cfr. Visible parameter above.

Type	Default Value
EventCallback<bool>	null