Alerts

Contextual feedback messages for user actions, available in multiple colors and styles.

Primary Alerts

Alert Message Headline

This is the subtext for your alert message, providing important information or instructions.

Alert Message Headline

This is the subtext for your alert message, providing important information or instructions.

Alert Message Headline

This is the subtext for your alert message, providing important information or instructions.

Alert Message Headline

This is the subtext for your alert message, providing important information or instructions.

      <pines-alert type="Primary" color="Blue" header="Alert Message Headline">
    This is the subtext for your alert message, providing important information or instructions.
  </pines-alert>

  <pines-alert type="Primary" color="Red" header="Alert Message Headline">
    This is the subtext for your alert message, providing important information or instructions.
  </pines-alert>

  <pines-alert type="Primary" color="Yellow" header="Alert Message Headline">
    This is the subtext for your alert message, providing important information or instructions.
  </pines-alert>

  <pines-alert type="Primary" color="Green" header="Alert Message Headline">
    This is the subtext for your alert message, providing important information or instructions.
  </pines-alert>

Secondary Alerts

Alert Message Headline

This is the subtext for your alert message, providing important information or instructions.

Alert Message Headline

This is the subtext for your alert message, providing important information or instructions.

Alert Message Headline

This is the subtext for your alert message, providing important information or instructions.

Alert Message Headline

This is the subtext for your alert message, providing important information or instructions.

      <pines-alert type="Primary" color="Blue" header="Alert Message Headline">
    This is the subtext for your alert message, providing important information or instructions.
  </pines-alert>

  <pines-alert type="Primary" color="Red" header="Alert Message Headline">
    This is the subtext for your alert message, providing important information or instructions.
  </pines-alert>

  <pines-alert type="Primary" color="Yellow" header="Alert Message Headline">
    This is the subtext for your alert message, providing important information or instructions.
  </pines-alert>

  <pines-alert type="Primary" color="Green" header="Alert Message Headline">
    This is the subtext for your alert message, providing important information or instructions.
  </pines-alert>