Biofarma | Bind UI

Alert

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

Type	Resource
Design	Figma
Mobile	Mobile Storybook
Code	Gitlab

Alert Preview

Usage

To implement Alert, you can use this tag Alert in the Kotlin file.

import id.co.biofarma.binduiandroid.components.alert.Alert

    Alert(
        variant="info",
        type="solid",
        title="Title for Alert",
        value="Interactive monetize corporate alignment",
        radius="none",
        showClose="false",
        onDismissRequest={}
    )

Examples

Variant

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

Type

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

Alert Composition

Alert could hide the title. You could pass the title props to null.

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

Alert with Close

Props

Props	Required	Default	Type	description
id	false	-	`string`	A unique identifier for the component.
name	false	-	`string`	Name for alert component.
title	false	-	`string`	Title text on alert.
variant	false	`info`	`info` `success` `warning` `danger`	The visual color variant of the alert.
type	false	`solid`	`solid` `subtle` `outline` `outline-light` `left-accent` `top-accent`	The visual style of the alert.
radius	false	`none`	`none` `xs` `sm` `md` `lg` `full`	Corner radius of the alert.
value	false	-	`string`	Description text of the alert.
showClose	false	`false`	`true` `false`	Showing close action to dismiss the alert
icon	false	`false`	`Composeable`	A composable function that describes the icon in the component
onDismissRequest	false	-	`function`	Callback function to run when close icon is clicked
style	false	-	`modifier`	To decorate or add behavior to Compose UI elements

Time Picker Loading