Biofarma | Bind UI

Tabs

The Tabs component is used to Display multiple views or screens in a single window or page, Allow users to switch between different tabs easily and quickly, and can Provide a clear and organized navigation system for the user.

Type	Resource
Design	Figma
Web	Web Storybook
Code	Gitlab

Tabs preview

Usage

import id.co.biofarma.binduiandroid.components.tabs.Tabs

fun Tabs(
    id: String = "",
    variant: String = "primary",
    size: String = ComponentSize.SM.value,
    radius: String = ComponentRadius.MD.value,
    mode: String = ThemeMode.LIGHT.value,
    style: Modifier = Modifier,
    type: String = TabType.TABS.value,
    data: List<TabData> = listOf(),
    active: String = "",
    onClick: (String) -> Unit = {},
    name: String = ""
)

Examples

Variant

Use variant for change variant of tabs component: group and buttontabs

Tabs preview 2

Mode (Optional)

Use mode for change color mode of tabs component: light and dark

Tabs preview 3

Props

Props	Required	Default	Type	Description
id	false	`""`	`String`	The unique identifier for the Tabs component, useful for accessibility or targeting specific elements.
variant	false	`group`	`Group` `Buttontabs`	Specifies the variant of the Tabs component, determining its visual style (e.g., default, primary, secondary).
size	false	`sm`	`String`	Specifies the size of the Tabs component (e.g., small, medium, large).
radius	false	`sm`	`String`	Specifies the border radius of the Tabs component (e.g., rounded, square).
mode	false	`light`	`light` `dark`	The theme mode of the Tabs component, such as light (`light`) or dark (`dark`).
style	false	`Modifier`	`Modifier`	The modifier to apply custom styling to the Tabs component, such as margin, padding, etc.
type	false	`""`	`String`	The type of Tabs (e.g., tabs, pill, etc.), determining the visual structure of the tabs.
data	false	`listOf()`	`List<TabData>`	A list of `TabData` objects that represent each tab’s content and label.
active	false	`""`	`String`	The identifier of the currently active tab.
onClick	false	`{}`	`(String) -> Unit`	A callback function triggered when a tab is clicked, passing the tab identifier as an argument.
name	false	`""`	`String`	The name of the Tabs component, often used for grouping related tabs or in form submissions.

Stepper Time Picker