/

<Alert> Component

The <Alert> component renders a small alert banner with a link to another page. It is often used to redirect users to a new release or announcement.

Share
Code Editor
<Alert

  url="#"

  tag="New"

  product="terraform"

  text="Terraform Collaboration for Everyone"

  textColor="dark"

/>

Where it's used

Latest:6.1.1
Search with

Releases

Latest:6.1.1
registry.npmjs.org
0.x.x
Loading 0.x.x releases...
1.x.x
Loading 1.x.x releases...
2.x.x
Loading 2.x.x releases...
3.x.x
Loading 3.x.x releases...
4.x.x
Loading 4.x.x releases...
5.x.x
Loading 5.x.x releases...
6.x.x
Loading 6.x.x releases...

Props

NameDescription
product
string
A lower-case product identifier to pull in respective theme colors. The default is hashicorp blue.
Options: "hashicorp", "boundary", "consul", "nomad", "packer", "terraform", "vault", "vagrant", "waypoint"
url*
string
URL that the alert points to
tag*
string
Label or summary of the main alert message
text*
string
Primary message of the alert
state
string
Special tag states that override brand values.
Options: "error", "warning", "success"
textColor
string
Background color of the text - default is light
Options: "dark", "light"
className
string
class to apply to the root element

Playground

If you need to override the brand color with a special state (error, warning, success):

Share
Code Editor
<Alert

  url="#"

  tag="New"

  product="terraform"

  text="Terraform Collaboration for Everyone"

  textColor="dark"

  state="error"

/>