Alert
Explore Bramble UI's dynamic alert components for effective communication. Enhance user interaction with interactive alerts.
Usage
import {Alert} from '@/ui'
<Alert
className='info' // 'info' | 'success' | 'warning' | 'error' | 'danger'
status='info'
message='Some contextual message useful to the user.' // can be HTML content
/>Info
Ugh umami bacon butcher pickled kogi stumptown, subway tile gatekeep flexitarian. Bespoke meggings health goth meh ascot listicle, cronut vaporware.
Success
Ugh umami bacon butcher pickled kogi stumptown, subway tile gatekeep flexitarian.
Marfa church-key cred, kinfolk mlkshk tousled roof party XOXO readymade solarpunk tbh adaptogen.
Warning
Some contextual message useful to the user.
Error
Some contextual message useful to the user.
Some contextual message useful to the user.
Sizes
Small
Some contextual message useful to the user.
Large
Some contextual message useful to the user.
<Alert
className='sm' // 'sm' | 'lg' | undefined
...
/>Outline
Info
Form submission was successful!
<Alert
className='info outline'
...
/>Solid
Info
Form submission was successful!
Form submission was successful!
Info
Form submission was successful!
<Alert
className='info solid'
...
/>Dismissible
404
Page could not be found!
const [error, setError] = useState('Page could not be found!')
{error && (
<Alert
className='error'
status='404'
message={error}
onClick={() => setError('')}
/>
)}RTL
404
Page could not be found!