Notification

Notifications are messages that communicate information to the user.
Overview API

Usage

A new software update is available.
A new version of the software is available. Click the button to view the changelog.
A new software update is available.
A new version of the software is available. Click the button to view the changelog.

  <pc-notification inline="true" dismissible="true" action="View Changelog">
    <div slot="title">A new
  <a class="link inline" href="https://goatui.com">software</a>
  update is available.
</div>
<div slot="subtitle">
  A new version of the software is available. Click the button to view the changelog.
</div>
  </pc-notification>

  <pc-notification dismissible="true" action="View Changelog">
    <div slot="title">A new
  <a class="link inline" href="https://goatui.com">software</a>
  update is available.
</div>
<div slot="subtitle">
  A new version of the software is available. Click the button to view the changelog.
</div>
  </pc-notification>

States

A new software update is available.
A new version of the software is available. Click the button to view the changelog.
A new software update is available.
A new version of the software is available. Click the button to view the changelog.
A new software update is available.
A new version of the software is available. Click the button to view the changelog.
A new software update is available.
A new version of the software is available. Click the button to view the changelog.

  <pc-notification>
    <div slot="title">A new
  <a class="link inline" href="https://goatui.com">software</a>
  update is available.
</div>
<div slot="subtitle">
  A new version of the software is available. Click the button to view the changelog.
</div>
  </pc-notification>
  <pc-notification state="success">
    <div slot="title">A new
  <a class="link inline" href="https://goatui.com">software</a>
  update is available.
</div>
<div slot="subtitle">
  A new version of the software is available. Click the button to view the changelog.
</div>
  </pc-notification>
  <pc-notification state="warning">
    <div slot="title">A new
  <a class="link inline" href="https://goatui.com">software</a>
  update is available.
</div>
<div slot="subtitle">
  A new version of the software is available. Click the button to view the changelog.
</div>
  </pc-notification>
  <pc-notification state="error">
    <div slot="title">A new
  <a class="link inline" href="https://goatui.com">software</a>
  update is available.
</div>
<div slot="subtitle">
  A new version of the software is available. Click the button to view the changelog.
</div>
  </pc-notification>

High contrast

High contrast notifications are designed to be more accessible for users with visual impairments. They have a higher contrast ratio between the text and background color.
A new software update is available.
A new version of the software is available. Click the button to view the changelog.
A new software update is available.
A new version of the software is available. Click the button to view the changelog.
A new software update is available.
A new version of the software is available. Click the button to view the changelog.
A new software update is available.
A new version of the software is available. Click the button to view the changelog.

  <pc-notification high-contrast="true" dismissible="true">
    <div slot="title">A new
  <a class="link inline" href="https://goatui.com">software</a>
  update is available.
</div>
<div slot="subtitle">
  A new version of the software is available. Click the button to view the changelog.
</div>
  </pc-notification>
  <pc-notification high-contrast="true" state="success">
    <div slot="title">A new
  <a class="link inline" href="https://goatui.com">software</a>
  update is available.
</div>
<div slot="subtitle">
  A new version of the software is available. Click the button to view the changelog.
</div>
  </pc-notification>
  <pc-notification high-contrast="true" state="warning">
    <div slot="title">A new
  <a class="link inline" href="https://goatui.com">software</a>
  update is available.
</div>
<div slot="subtitle">
  A new version of the software is available. Click the button to view the changelog.
</div>
  </pc-notification>
  <pc-notification high-contrast="true" state="error">
    <div slot="title">A new
  <a class="link inline" href="https://goatui.com">software</a>
  update is available.
</div>
<div slot="subtitle">
  A new version of the software is available. Click the button to view the changelog.
</div>
  </pc-notification>

On this page

UsageStatesHigh contrast

Properties

Events

Methods

CSS Custom Properties

Previous Next Previous