Biofarma | Bind UI

Alert

Alerts are designed to display a list of options on a temporary surface.

Type	Resource
Design	Figma
Web	Web Storybook
Code	Gitlab

We are going live in July!We are happy to announce that we are going live on July 28th. Get ready!

Usage

import { Alert } from 'bio-bind-ui';

<Alert
  content='We are happy to announce that we are going live on July 28th. Get ready!'
  id=''
  mode='light'
  name='alert'
  onClickClose={() => {}}
  radius='md'
  showTitle
  open='true'
  style={{}}
  title='We are going live in July!'
  type='solid'
  variant='info'
/>

Examples

Alert Variant

Set the variant prop to info, success, warning, or danger for different color.

Alert InfoWe are happy to announce that we are going live on July 28th. Get ready!

Alert SuccessWe are happy to announce that we are going live on July 28th. Get ready!

Alert WarningWe are happy to announce that we are going live on July 28th. Get ready!

Alert DangerWe are happy to announce that we are going live on July 28th. Get ready!

Alert Type

Set the type prop to solid, subtle, outline, outline-light, left-accent, or top-accent for different style.

Alert SolidWe are happy to announce that we are going live on July 28th. Get ready!

Alert SubtleWe are happy to announce that we are going live on July 28th. Get ready!

Alert OutlineWe are happy to announce that we are going live on July 28th. Get ready!

Alert Outline LightWe are happy to announce that we are going live on July 28th. Get ready!

Alert Left AccentWe are happy to announce that we are going live on July 28th. Get ready!

Alert Top AccentWe are happy to announce that we are going live on July 28th. Get ready!

Alert Composition (Optional)

Alert could hide the title. You could set the showTitle to false. Here’s an example of a hide the title:

We are happy to announce that we are going live on July 28th. Get ready!

Also, alert could show the close action to dismiss the component. Here’s an example of an alert with wrapping content text and the close component with simple close functionality

Mode (Optional)

Use mode to use dark or light

Alert Light ModeWe are happy to announce that we are going live on July 28th. Get ready!

Alert Dark ModeWe are happy to announce that we are going live on July 28th. Get ready!

Props

Props	Required	Default	Type	description
content	true	-	`string`	The content text for the alert.
style	false	-	`CSSProperties`	Custom styles for the alert component.
mode	false	`light`	`light` `dark`	The theme mode of the alert (`light` or `dark`).
id	false	-	`string`	A unique identifier for the alert.
name	false	-	`string`	Name for the alert.
variant	false	`info`	`info` `success` `warning` `danger`	The visual color variant of the alert.
radius	false	`md`	`none` `xs` `sm` `md` `lg` `full`	Corner radius of alert.
type	false	`solid`	`solid` `subtle` `outline` `left-accent` `top-accent`	The visual style type of the alert
showClose	false	`false`	`true` `false`	If true, alert will have dismiss / close icon.
open	false	`true`	`true` `false`	If false, alert will not be displayed
onClickClose	false	-	`function`	Callback function to run when the alert close icon is clicked.
title	false	-	`string`	The title for alert.
showTitle	false	`true`	`true` `false`	If false, the alert title will be hidden.

Table Loading