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 { Alert, Stack } from 'biibaos'

export default function App() {
  return (
    <Stack direction="column" gap={12}>
      <Alert title="Default Alert" description="Simple info alert" />
      <Alert variant="success" title="Success" description="Changes saved" />
      <Alert variant="danger" title="Error" description="Processing failed" />
    </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" 
      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