Alert

The Alert component displays important messages to users with different severity levels, variants, and optional actions like dismissal. Title and body each accept full <Text> props via titleProps / bodyProps.

Source

View source code

LLM docs

LLM documentation

Package

@platform-blocks/react-ui-library

Examples

⁽³⁾

Properties

⁽²⁹⁾

Playground

Basics

Use severity to set it — it picks the matching color and icon automatically.

Loading demo…

import
 
{
 
Alert
,
 
Block
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Block
>
      
<Alert
 
severity
=
"info"
 
title
=
"Heads up"
>
        
Use
 alerts to highlight contextual information inline with page content
.
      
</Alert
>
      
<Alert
 
severity
=
"success"
 
title
=
"Profile saved"
>
        
Your
 changes were stored successfully
.
      
</Alert
>
      
<Alert
 
severity
=
"error"
 
title
=
"Connection issue"
>
        
Retry
 the action or check the status page 
for
 outages
.
      
</Alert
>
    
</Block
>
  
)
;
}

Variants

Compare light, outline, filled, and subtle variants to match alert prominence to the message.

Loading demo…

import
 
{
 
Alert
,
 
Block
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Block
>
      
<Alert
 
variant
=
"light"
 
color
=
"primary"
 
title
=
"Light"
>
        
Balanced
 background and border treatment 
for
 inline notes
.
      
</Alert
>
      
<Alert
 
variant
=
"outline"
 
color
=
"success"
 
title
=
"Outline"
>
        
Subtle
 emphasis without increasing background contrast
.
      
</Alert
>
      
<Alert
 
variant
=
"filled"
 
color
=
"warning"
 
title
=
"Filled"
>
        
High
-
contrast option 
for
 urgent messaging
.
      
</Alert
>
      
<Alert
 
variant
=
"subtle"
 
color
=
"error"
 
title
=
"Subtle"
>
        
No
 background color
,
 but tinted icon and text
.
      
</Alert
>
    
</Block
>
  
)
;
}

Dismissible

Add withCloseButton and handle onClose to let users dismiss an alert.

Loading demo…

import
 
{
 useState 
}
 
from
 
'react'
;
import
 
{
 
Alert
,
 
Button
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
const
 
[
visible
,
 setVisible
]
 
=
 
useState
(
true
)
;
 
  
if
 
(
!
visible
)
 
{
    
return
 
(
      
<Button
 
variant
=
"outline"
 
onPress
=
{
(
)
 
=>
 
setVisible
(
true
)
}
>
        
Show
 alert
      
</Button
>
    
)
;
  
}
 
  
return
 
(
    
<Alert
      
severity
=
"warning"
      
title
=
"Draft warning"
      withCloseButton
      
onClose
=
{
(
)
 
=>
 
setVisible
(
false
)
}
    
>
      
Your
 draft is missing a title
.
 
Resolve
 before publishing
.
    
</Alert
>
  
)
;
}

Scan to open this page on your phonereact-ui-library.com/components/Alert

</>

react-ui-library

100+ accessible, themeable components that work seamlessly across iOS, Android, and Web.

A Platform Blocks product.

Quick Links

Components Charts Hooks

Docs

Getting Started Localization llms.txt

Resources

FAQ Changelog Accessibility Sitemap