Skip to main content

​
Overview

The AlertBanner component displays brief alert messages in a horizontal banner format, perfect for notifications, announcements, or status messages.

​
Basic Usage

import AlertBanner from '@newtonschool/grauity';

function MyComponent() {
  return (
    <AlertBanner
      variant="primary"
      type="filled"
      icon="auto"
    >
      This is an important announcement!
    </AlertBanner>
  );
}

​
Props

​
type
string
default:"default"
Type/style of the alert banner.Available choices:
  • default - Colorless background, colored icon & text
  • outlined - Light colored background with outline
  • filled - Colored background with white text
​
variant
string
default:"primary"
Variant/color theme of the alert banner.Available choices: primary, success, warning, error, default
​
icon
grauityIconName | 'auto'
Icon to display. Use auto to automatically select based on variant.
​
children
React.ReactNode
required
Content to display in the banner.
​
padding
string
Custom padding for the banner. Defaults to var(--spacing-4px, 4px) var(--spacing-8px, 8px) if action buttons/close button are present, else var(--spacing-8px, 8px).
​
justifyContent
string
default:"center"
Content alignment.Available choices: center, space-between, space-around
​
showCloseButton
boolean
default:false
Show a close button in the banner.
​
onClose
function
Callback function when the close button is clicked.
​
actionButtons
ButtonProps[]
Array of action button configurations.
​
position
string
default:"static"
CSS position property.Available choices: static, fixed, absolute, relative
​
top
string
default:"null"
Top position value (useful for fixed positioning).
​
bottom
string
default:"null"
Bottom position value.
​
left
string
default:"null"
Left position value.
​
right
string
default:"null"
Right position value.
​
className
string
default:""
Additional CSS class name.
<AlertBanner type="default" variant="primary" icon="auto">
  Default banner with colored icon and text
</AlertBanner>

<AlertBanner type="outlined" variant="success" icon="auto">
  Outlined banner with light background
</AlertBanner>

<AlertBanner type="filled" variant="warning" icon="auto">
  Filled banner with colored background
</AlertBanner>

<AlertBanner variant="primary" type="filled" icon="auto">
  Primary banner
</AlertBanner>

<AlertBanner variant="success" type="filled" icon="auto">
  Success banner
</AlertBanner>

<AlertBanner variant="warning" type="filled" icon="auto">
  Warning banner
</AlertBanner>

<AlertBanner variant="error" type="filled" icon="auto">
  Error banner
</AlertBanner>

​
With Close Button

<AlertBanner
  variant="primary"
  showCloseButton={true}
  onClose={() => console.log('Banner closed')}
>
  This banner can be dismissed
</AlertBanner>

​
With Action Buttons

<AlertBanner
  variant="warning"
  icon="auto"
  actionButtons={[
    {
      children: 'Learn More',
      variant: 'primary',
      color: 'neutral',
      size: 'small',
    },
  ]}
>
  New features available!
</AlertBanner>

​
Fixed Position

<AlertBanner
  variant="success"
  type="filled"
  position="fixed"
  top="0"
  left="0"
  right="0"
>
  Fixed banner at the top of the page
</AlertBanner>

​
Custom Alignment

<AlertBanner
  variant="primary"
  justifyContent="space-between"
>
  Content aligned with space between
</AlertBanner>

Build docs developers (and LLMs) love

Get started for freeTalk to us