Biofarma | Bind UI

Button

Buttons enable users to take actions or navigate to different pages. They come in various styles to suit different needs and are particularly effective for drawing attention to the actions users need to take in order to progress in a workflow.

Type	Resource
Design	Figma
Web	Web Storybook
Code	Gitlab

Usage

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

<Button
  endIcon=''
  icon=''
  id='button'
  label='BUTTON'
  labelLoading='Loading...'
  loadingPosition='left'
  mode='light'
  name='button'
  onClick={() => {}}
  radius='xs'
  size='md'
  startIcon=''
  type='solid'
  variant='primary'
/>

Examples

Button Variant

Use the variant prop to change color style of the Button. You can set the value to primary, secondary, or danger

Button Type

Use the type prop to change the visual style of the Button. You can set the value to solid, outline, ghost, or link.

Button Size

Use the size prop to change the size of the Button. You can set the value to xs, sm, md, or lg.

Loading (optional)

Enable the isLoading prop to set button become loading state. You can set loadingPosition to left or right

Props

Props	Required	Default	Type	description
endIcon	false	-	`ReactNode`	If added, the button will show an icon after the button’s label.
icon	false	-	`ReactNode`	Provide for Icon Button (Icon Only)
id	false	-	`string`	A unique identifier for the button.
label	true	-	`string`	The label text on the button.
isLoading	false	`false`	`true` `false`	If true, the button will be set to be loading state
labelLoading	false	`"Loading"`	`string`	The button label when it is loading.
loadingPosition	false	`left`	`left` `right`	It determines the position of the spinner when `isLoading` is true (`left` or `right`)
mode	false	`light`	`light` `dark`	The theme mode of the button (`light` or `dark`).
name	false	`button`	`string`	Name for the button
onClick	false	-	`function`	Callback function to run when the button is clicked.
radius	true	`sm`	`none` `xs` `sm` `md` `lg` `full`	Corner radius of the button
size	true	`md`	`xs` `sm` `md` `lg`	The size of the Button
startIcon	false	-	`ReactNode`	If added, the button will show an icon before the button’s label
style	false	-	`CSSProperties`	Custom styles for the button component.
variant	false	`primary`	`primary` `secondary` `danger`	The visual color variant of the button.
type	false	`solid`	`solid` `subtle` `outline` `ghost`, `link`, `icon`	The visual style variant of the button.
disabled	false	`false`	`true` `false`	If true, button will be set to be disabled state

Badge Divider