Feedback

Alert

Static contextual feedback messages with icons and actions.

Basic Usage

Contextual feedback messages for highlighting information, success, warnings, or errors.

Default Alert

This is a simple information alert.

Success Alert

Your changes have been saved.

Warning Alert

Your session is about to expire.

Danger Alert

There was an error processing your request.

Info Alert

New updates are available.

'use client'

import React from 'react'
import { Stack, Alert } from 'biibaos'
import { Info } from 'lucide-react'

export default function App() {
  return (
    <Stack direction="column" gap={12} style={{ width: '100%' }}>
            <Alert title="Default Alert" description="This is a simple information alert." />
            <Alert variant="success" title="Success Alert" description="Your changes have been saved." />
            <Alert variant="warning" title="Warning Alert" description="Your session is about to expire." />
            <Alert variant="danger" title="Danger Alert" description="There was an error processing your request." />
            <Alert variant="info" title="Info Alert" description="New updates are available." />
          </Stack>
  )
}

With Action

Alerts can include a primary action button on the far right.

Update Available

Version 2.0.4 is now available for download.

'use client'

import React from 'react'
import { Alert } from 'biibaos'

export default function App() {
  return (
    <Alert
            variant="info"
            title="Update Available"
            description="Version 2.0.4 is now available for download."
            action={{ label: 'Update now', onClick: () => alert('Updating...') }}
          />
  )
}

Dismissible

Add an onClose callback to show a close button.

Attention Required

Please review your privacy settings.

'use client'

import React from 'react'
import { Alert } from 'biibaos'

export default function App() {
  return (
    <Alert
            variant="warning"
            title="Attention Required"
            description="Please review your privacy settings."
            onClose={() => alert('Closed')}
          />
  )
}

Properties

Prop	Type	Default	Description
`title`	`string`	—	Structural modal header title
`description`	`React.ReactNode`	—	Supporting description or helper guidance text
`variant`	`AlertVariant`	'default'	Semantic design theme variant
`onClose`	`() => void`	—	Callback function triggered when closing the overlay
`closeIcon`	`React.ReactNode`	—	Configures the closeIcon option
`style`	`React.CSSProperties`	—	Inline CSS styles for custom overrides
`className`	`string`	—	Additional CSS class names to apply to the root element
`icon`	`React.ReactNode`	—	Custom icon prefix element
`action`	`{ label: string`	—	Configures the action option
`onClick`	`() => void`	—	Click event callback handler

Snackbar

Navbar