Actions

Button

Trigger actions with haptic feedback, ripple effects, loading states, and icon support.

Basic Usage

The standard button for primary and secondary actions.

'use client'

import React from 'react'
import { Button } from 'biibaos'

export default function App() {
  return (
    <Button variant="primary" onClick={() => alert('Clicked!')}>
      Click me
    </Button>
  )
}

Variants

'use client'

import React from 'react'
import { Button, Stack } from 'biibaos'

export default function App() {
  return (
    <Stack gap={12} wrap>
      <Button variant="primary">Primary</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="danger">Danger</Button>
      <Button variant="success">Success</Button>
    </Stack>
  )
}

Sizes

Five sizes for different layout priorities.

'use client'

import React from 'react'
import { Button, Stack } from 'biibaos'

export default function App() {
  return (
    <Stack gap={12} align="center">
      <Button size="xs">Extra Small</Button>
      <Button size="sm">Small</Button>
      <Button size="md">Medium</Button>
      <Button size="lg">Large</Button>
      <Button size="xl">Extra Large</Button>
    </Stack>
  )
}

With Icons

Support for icons on either side.

'use client'

import React from 'react'
import { Button, Stack, Icon } from 'biibaos'
import { Zap, ArrowRight } from 'lucide-react'

export default function App() {
  return (
    <Stack gap={12}>
      <Button leftIcon={<Icon icon={Zap} size={16} />}>
        Flash
      </Button>
      <Button variant="secondary" rightIcon={<Icon icon={ArrowRight} size={16} />}>
        Next Step
      </Button>
    </Stack>
  )
}

States

Loading and disabled states.

'use client'

import React from 'react'
import { Button, Stack } from 'biibaos'

export default function App() {
  return (
    <Stack gap={12}>
      <Button loading>Processing</Button>
      <Button disabled>Locked</Button>
      <Button variant="ghost" pill>Pill Shape</Button>
    </Stack>
  )
}

Icon-Only

Square icon buttons for toolbars and tight spaces. Always add aria-label.

'use client'

import React from 'react'
import { Button, Icon } from 'biibaos'
import { Plus, Search, Settings } from 'lucide-react'

export default function App() {
  return (
    <Stack direction="row" gap={10}>
      <Button iconOnly aria-label="Add" leftIcon={<Icon icon={Plus} size={18} />} />
      <Button iconOnly variant="secondary" aria-label="Search" leftIcon={<Icon icon={Search} size={18} />} />
      <Button iconOnly variant="ghost" aria-label="Settings" leftIcon={<Icon icon={Settings} size={18} />} />
    </Stack>
  )
}

Loading States

Show custom text while loading with loadingText.

'use client'

import React from 'react'
import { Button, Stack } from 'biibaos'

export default function App() {
  return (
    <Stack gap={12}>
      <Button loading loadingText="Saving…" variant="primary" />
      <Button loading variant="secondary" />
    </Stack>
  )
}

Render as Link

Pass href to render the button as a semantic anchor element. It still supports onClick, haptics, and ripple effects.

Visit Docs

'use client'

import React from 'react'
import { Button, Icon } from 'biibaos'
import { ArrowRight } from 'lucide-react'

export default function App() {
  return (
    <Button 
      href="/docs" 
      onClick={(e) => console.log('Navigating...')}
      rightIcon={<Icon icon={ArrowRight} size={16} />}
    >
      Visit Docs
    </Button>
  )
}

Events

Standard event handlers like onClick work as expected, even with haptic and motion layers.

'use client'

import { Button, Stack } from 'biibaos'
import { useState } from 'react'

export default function App() {
  const [count, setCount] = useState(0)

  return (
    <Stack gap={16}>
      <Button onClick={() => setCount(c => c + 1)}>
        Clicks: {count}
      </Button>
      <Button variant="ghost" onClick={() => alert('Triggered')}>
        Alert
      </Button>
    </Stack>
  )
}

Real-world Scenario: Auth Action

Combining loading states, icons, and badges for a premium authentication or action flow.

'use client'

import { Button, Icon, Stack, Text } from 'biibaos'
import { User, Check } from 'lucide-react'
import { useState } from 'react'

export default function LoginButton() {
  const [loading, setLoading] = useState(false)
  const [success, setSuccess] = useState(false)

  const handleAction = async () => {
    setLoading(true)
    await new Promise(r => setTimeout(r, 2000))
    setLoading(false)
    setSuccess(true)
  }

  return (
    <Button 
      fullWidth 
      variant={success ? 'success' : 'primary'}
      loading={loading}
      loadingText="Authenticating..."
      leftIcon={success ? <Icon icon={Check} /> : <Icon icon={User} />}
      onClick={handleAction}
      badge={!loading && !success ? '2' : undefined}
    >
      {success ? 'Authenticated' : 'Sign In'}
    </Button>
  )
}

Properties

Prop	Type	Default	Description
`children`	`React.ReactNode`	—	Main descriptive text or overlay children layout
`size`	`BiibaSize`	'md'	Visual scale of the button
`variant`	`BiibaVariant \| 'link' \| 'danger'`	'primary'	Color and style variant
`loading`	`boolean`	false	Shows a spinner and disables interaction
`disabled`	`boolean`	false	If true, disables all user interaction and applies faded opacity
`fullWidth`	`boolean`	false	Stretches to fill parent width
`pill`	`boolean`	false	Fully rounded pill shape
`iconOnly`	`boolean`	false	Removes padding for icon-only square button
`leftIcon`	`React.ReactNode`	—	Icon rendered to the left of children
`rightIcon`	`React.ReactNode`	—	Icon rendered to the right of children
`loadingIcon`	`React.ReactNode`	—	Override the icon used in the loading state
`loadingText`	`string`	—	Text shown while loading (replaces children)
`hapticFeedback`	`boolean`	true	Enable haptic feedback on mobile
`as`	`'button' \| 'a'`	—	Render as anchor tag
`href`	`string`	—	URL address of the link. Renders as text if omitted
`target`	`string`	—	Target for anchor rendering
`rel`	`string`	—	Link relationship metadata
`aria-label`	`string`	—	Accessible label for icon-only buttons
`badge`	`React.ReactNode`	—	Content rendered in a small circle at the top-right of the button

Button Group