Button

The Button component triggers actions such as submitting a form, opening a dialog, or executing a task.

Import

import { Button } from '@lazy-panda-ui/lazy-panda-ui';

Usage

import React from 'react';
import { Button } from '@lazy-panda-ui/lazy-panda-ui';

function MyComponent() {
  return (
    <Button title="Press Me" variant="contained" onPress={() => console.log('pressed')} />
  );
}

Props

Name	Type	Default	Description
title	string	—	Text content of the button
variant	'text' | 'contained' | 'outlined' | 'tonal' | 'elevated'	'contained'	Visual variant
size	'small' | 'medium' | 'large'	'medium'	Button size
color	'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success'	'primary'	Color scheme
disabled	boolean	false	Disabled state
loading	boolean	false	Show spinner
leftIcon	ReactNode	—	Icon before text
rightIcon	ReactNode	—	Icon after text
fullWidth	boolean	false	Stretch to container width
ripple	boolean	true	Android ripple effect toggle
onPress	() => void	—	Press handler
style	StyleProp<ViewStyle>	—	Container style override
textStyle	StyleProp<TextStyle>	—	Text style override
fullWidth	boolean	false	If true, the button will take up the full width
onPress	() => void	-	Callback fired when the button is pressed
style	StyleProp<ViewStyle>	-	Additional styles for the button

Variants

<>
  <Button title="Text" variant="text" />
  <Button title="Contained" variant="contained" />
  <Button title="Outlined" variant="outlined" />
  <Button title="Tonal" variant="tonal" />
  <Button title="Elevated" variant="elevated" />
</>

Examples

With Icons

<Button title="With Icons" variant="contained" leftIcon={<Icon name="star" />} rightIcon={<Icon name="chevron-right" />} />

Loading State

<Button title="Loading" variant="contained" loading />

Full Width

<Button title="Full Width" variant="contained" fullWidth />

Custom Styled

<Button title="Rounded" variant="contained" style={{ borderRadius: 25, paddingHorizontal: 32 }} />

Accessibility

• Android ripple effect is enabled by default (disable with ripple={false}).
• Proper accessibility states for disabled and busy (loading).
• Provide accessibilityLabel and accessibilityHint when needed.

<Button title="Submit" accessibilityLabel="Submit form" accessibilityHint="Submits the form and saves your data" onPress={() => {}} />

API Reference

Colors

Buttons can use any of the theme colors:

<>
  <Button color="primary" variant="contained">Primary</Button>
  <Button color="secondary" variant="contained">Secondary</Button>
  <Button color="error" variant="contained">Error</Button>
  <Button color="warning" variant="contained">Warning</Button>
  <Button color="info" variant="contained">Info</Button>
  <Button color="success" variant="contained">Success</Button>
</>

Sizes

Available sizes for buttons:

<>
  <Button size="small">Small</Button>
  <Button size="medium">Medium</Button>
  <Button size="large">Large</Button>
</>

Theming

Buttons use tokens under theme.button, which you can override via ThemeProvider.

theme.button = {
  sizes: {
    small: { minHeight: number, paddingX: number, fontSize: number },
    medium: { minHeight: number, paddingX: number, fontSize: number },
    large: { minHeight: number, paddingX: number, fontSize: number },
  },
  borderRadius: number,
  iconSpacing: number,
  outlinedBorderWidth: number,
  elevated: {
    elevation: number,
    pressedElevation: number,
    shadowColor: string,
    shadowOpacity: number,
    shadowRadius: { default: number, pressed: number },
  },
  tonalOpacity: number,
}

Example customization:

import { ThemeProvider, createTheme, defaultTheme } from '@lazy-panda-ui/lazy-panda-ui/theme';

const theme = createTheme(defaultTheme, {
  button: {
    sizes: { medium: { minHeight: 44, paddingX: 20, fontSize: 16 } },
    borderRadius: 10,
    elevated: { ...defaultTheme.button.elevated, elevation: 6, pressedElevation: 3 },
    tonalOpacity: 0.18,
  },
});

export function App() {
  return (
    <ThemeProvider theme={theme}>
      <Button title="Custom" variant="tonal" />
    </ThemeProvider>
  );
}

Best Practices

1. Use clear and action-oriented labels
2. Choose appropriate variants for different actions:
   • Contained for primary actions
   • Outlined for secondary actions
   • Text for tertiary actions
3. Use consistent sizing within your application
4. Include loading states for async actions
5. Provide proper accessibility labels
6. Use color to convey meaning and importance

Related Components

• IconButton - A round button with an icon
• Fab - A floating action button
• ToggleButton - A button that can be toggled