Alert

Examples
Info Alert
Theme: seekAnz
This is an important piece of information.
Theme: seekBusiness
This is an important piece of information.
Theme: jobsDbRebrand
This is an important piece of information.
Theme: jobsDb
This is an important piece of information.
Theme: jobStreet
This is an important piece of information.
Theme: jobStreetClassic
This is an important piece of information.
Theme: wireframe
This is an important piece of information.
Code:
<Alert tone="info">This is an important piece of information.</Alert>
Dismissible alert
Theme: seekAnz
This is an important piece of information.
Theme: seekBusiness
This is an important piece of information.
Theme: jobsDbRebrand
This is an important piece of information.
Theme: jobsDb
This is an important piece of information.
Theme: jobStreet
This is an important piece of information.
Theme: jobStreetClassic
This is an important piece of information.
Theme: wireframe
This is an important piece of information.
Code:
<Alert closeLabel="Close info alert" onClose={function noRefCheck() {}}>
  This is an important piece of information.
</Alert>
Strong Info Alert
Theme: seekAnz
This is an important piece of information.
Theme: seekBusiness
This is an important piece of information.
Theme: jobsDbRebrand
This is an important piece of information.
Theme: jobsDb
This is an important piece of information.
Theme: jobStreet
This is an important piece of information.
Theme: jobStreetClassic
This is an important piece of information.
Theme: wireframe
This is an important piece of information.
Code:
<Alert tone="info" weight="strong">
  This is an important piece of information.
</Alert>
Promote Alert
Theme: seekAnz
This is a promoted piece of information.
Theme: seekBusiness
This is a promoted piece of information.
Theme: jobsDbRebrand
This is a promoted piece of information.
Theme: jobsDb
This is a promoted piece of information.
Theme: jobStreet
This is a promoted piece of information.
Theme: jobStreetClassic
This is a promoted piece of information.
Theme: wireframe
This is a promoted piece of information.
Code:
<Alert tone="promote">This is a promoted piece of information.</Alert>
Strong Promote Alert
Theme: seekAnz
This is a promoted piece of information.
Theme: seekBusiness
This is a promoted piece of information.
Theme: jobsDbRebrand
This is a promoted piece of information.
Theme: jobsDb
This is a promoted piece of information.
Theme: jobStreet
This is a promoted piece of information.
Theme: jobStreetClassic
This is a promoted piece of information.
Theme: wireframe
This is a promoted piece of information.
Code:
<Alert tone="promote" weight="strong">
  This is a promoted piece of information.
</Alert>
Critical Alert
Theme: seekAnz
This is a critical piece of information.
Theme: seekBusiness
This is a critical piece of information.
Theme: jobsDbRebrand
This is a critical piece of information.
Theme: jobsDb
This is a critical piece of information.
Theme: jobStreet
This is a critical piece of information.
Theme: jobStreetClassic
This is a critical piece of information.
Theme: wireframe
This is a critical piece of information.
Code:
<Alert tone="critical">This is a critical piece of information.</Alert>
Strong Critical Alert
Theme: seekAnz
This is a critical piece of information.
Theme: seekBusiness
This is a critical piece of information.
Theme: jobsDbRebrand
This is a critical piece of information.
Theme: jobsDb
This is a critical piece of information.
Theme: jobStreet
This is a critical piece of information.
Theme: jobStreetClassic
This is a critical piece of information.
Theme: wireframe
This is a critical piece of information.
Code:
<Alert tone="critical" weight="strong">
  This is a critical piece of information.
</Alert>
Positive Alert
Theme: seekAnz
This is a positive piece of information.
Theme: seekBusiness
This is a positive piece of information.
Theme: jobsDbRebrand
This is a positive piece of information.
Theme: jobsDb
This is a positive piece of information.
Theme: jobStreet
This is a positive piece of information.
Theme: jobStreetClassic
This is a positive piece of information.
Theme: wireframe
This is a positive piece of information.
Code:
<Alert tone="positive">This is a positive piece of information.</Alert>
Strong Positive Alert
Theme: seekAnz
This is a positive piece of information.
Theme: seekBusiness
This is a positive piece of information.
Theme: jobsDbRebrand
This is a positive piece of information.
Theme: jobsDb
This is a positive piece of information.
Theme: jobStreet
This is a positive piece of information.
Theme: jobStreetClassic
This is a positive piece of information.
Theme: wireframe
This is a positive piece of information.
Code:
<Alert tone="positive" weight="strong">
  This is a positive piece of information.
</Alert>

Required props

children
ReactNode

Optional props

tone
"info" | "promote" | "critical" | "positive"
weight
"regular" | "strong"
id
string
onClose
() => void
closeLabel
string

Further References