Storybook

Alert

This is a primary alert—check it out!

This is a secondary alert—check it out!

This is a success alert—check it out!

This is a danger alert—check it out!

This is a warning alert—check it out!

This is a info alert—check it out!

This is a light alert—check it out!

This is a dark alert—check it out!

HTML Code


    <Alert key='primary' variant='primary'>
        This is a primary alert—check it out!
    </Alert>
    <Alert key='secondary' variant='secondary'>
        This is a secondary alert—check it out!
    </Alert>
    <Alert key='success' variant='success'>
        This is a success alert—check it out!
    </Alert>
    <Alert key='danger' variant='danger'>
        This is a danger alert—check it out!
    </Alert>
    <Alert key='warning' variant='warning'>
        This is a warning alert—check it out!
    </Alert>
    <Alert key='info' variant='info'>
        This is a info alert—check it out!
    </Alert>
    <Alert key='light' variant='light'>
        This is a light alert—check it out!
    </Alert>
    <Alert key='dark' variant='dark'>
        This is a dark alert—check it out!
    </Alert>

Name	Type	Default	Description
bsPrefix	string \| undefined	'alert'	Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.
variant	'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'dark' \| 'light' \| undefined		The Alert visual variant.
dismissible	boolean \| undefined		controlled by: onClose, initial prop: defaultShow Controls the visual state of the Alert.
show	boolean \| undefined		controlled by: activeIndex, initial prop: defaultOnSelect Callback fired when the active item changes.
defaultShow	boolean \| undefined		Default show state of the Alert.
onClose	((show: boolean, event: any) => void) \| undefined		controlled by: show, initial prop: defaultOnClose Callback fired when alert is closed.
closeLabel	string \| undefined		Sets the text for alert close button.
closeVariant	CloseButtonVariant \| undefined		Sets the variant for close button.
transition	boolean \| TransitionComponent \| undefined		Animate the alert dismissal. Defaults to using <Fade> animation or use false to disable. A custom react-transition-group Transition can also be provided.