Home Components Notification
Notification
Overview API
Notifications are messages that communicate information to the user.
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. 

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

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

  <goat-notification>
    <div slot="title">A new
  <goat-link inline="true" href="https://goatui.com">software</goat-link>
  update is available.
</div>
<div slot="subtitle">
  A new version of the software is available. Click the button to view the changelog.
</div>
  </goat-notification>
  <goat-notification state="success">
    <div slot="title">A new
  <goat-link inline="true" href="https://goatui.com">software</goat-link>
  update is available.
</div>
<div slot="subtitle">
  A new version of the software is available. Click the button to view the changelog.
</div>
  </goat-notification>
  <goat-notification state="warning">
    <div slot="title">A new
  <goat-link inline="true" href="https://goatui.com">software</goat-link>
  update is available.
</div>
<div slot="subtitle">
  A new version of the software is available. Click the button to view the changelog.
</div>
  </goat-notification>
  <goat-notification state="error">
    <div slot="title">A new
  <goat-link inline="true" href="https://goatui.com">software</goat-link>
  update is available.
</div>
<div slot="subtitle">
  A new version of the software is available. Click the button to view the changelog.
</div>
  </goat-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. 

  <goat-notification high-contrast="true" dismissible="true">
    <div slot="title">A new
  <goat-link inline="true" href="https://goatui.com">software</goat-link>
  update is available.
</div>
<div slot="subtitle">
  A new version of the software is available. Click the button to view the changelog.
</div>
  </goat-notification>
  <goat-notification high-contrast="true" state="success">
    <div slot="title">A new
  <goat-link inline="true" href="https://goatui.com">software</goat-link>
  update is available.
</div>
<div slot="subtitle">
  A new version of the software is available. Click the button to view the changelog.
</div>
  </goat-notification>
  <goat-notification high-contrast="true" state="warning">
    <div slot="title">A new
  <goat-link inline="true" href="https://goatui.com">software</goat-link>
  update is available.
</div>
<div slot="subtitle">
  A new version of the software is available. Click the button to view the changelog.
</div>
  </goat-notification>
  <goat-notification high-contrast="true" state="error">
    <div slot="title">A new
  <goat-link inline="true" href="https://goatui.com">software</goat-link>
  update is available.
</div>
<div slot="subtitle">
  A new version of the software is available. Click the button to view the changelog.
</div>
  </goat-notification>
Usage States High contrast
Properties
Events
Methods
CSS Custom Properties
Previous Next