Button

The Button component is a fundamental building block for user interactions. It supports multiple emphasiss and sizes to accommodate different design contexts.

Import

import { Button } from '@oztix/roadie-components'

Examples

Emphasis

Different button emphasiss for various contexts:

<View gap='200' flexDirection='row'>
  <Button emphasis='strong'>
    Strong Button
  </Button>
  <Button emphasis='default'>
    Default Button
  </Button>
  <Button emphasis='subtle'>
    Subtle Button
  </Button>
  <Button emphasis='subtler'>
    Subtler Button
  </Button>
</View>

Sizes

<View gap='200' flexDirection='row' alignItems='center'>
  <Button size='xs'>Extra Small</Button>
  <Button size='sm'>Small</Button>
  <Button size='md'>Medium (Default)</Button>
  <Button size='lg'>Large</Button>
</View>

Colors

Neutral is the default color palette for all buttons.

Each color palette is designed for specific use cases:

• neutral: Default for most actions
• accent: Primary or highlighted actions
• brand: Brand-specific actions
• information: Informational or help-related actions
• success: Positive or completion actions
• warning: Cautionary actions
• danger: Destructive or high-risk actions

<View gap='200'>
  <View flexDirection='row' gap='200'>
    <Button emphasis='strong' colorPalette='neutral'>
      Neutral
    </Button>
    <Button emphasis='strong' colorPalette='accent'>
      Accent
    </Button>
    <Button emphasis='strong' colorPalette='brand'>
      Brand
    </Button>
    <Button emphasis='strong' colorPalette='information'>
      Information
    </Button>
    <Button emphasis='strong' colorPalette='success'>
      Success
    </Button>
    <Button emphasis='strong' colorPalette='warning'>
      Warning
    </Button>
    <Button emphasis='strong' colorPalette='danger'>
      Danger
    </Button>
  </View>
  <View flexDirection='row' gap='200'>
    <Button emphasis='default' colorPalette='neutral'>
      Neutral
    </Button>
    <Button emphasis='default' colorPalette='accent'>
      Accent
    </Button>
    <Button emphasis='default' colorPalette='brand'>
      Brand
    </Button>
    <Button emphasis='default' colorPalette='information'>
      Information
    </Button>
    <Button emphasis='default' colorPalette='success'>
      Success
    </Button>
    <Button emphasis='default' colorPalette='warning'>
      Warning
    </Button>
    <Button emphasis='default' colorPalette='danger'>
      Danger
    </Button>
  </View>
  <View flexDirection='row' gap='200'>
    <Button emphasis='subtle' colorPalette='neutral'>
      Neutral
    </Button>
    <Button emphasis='subtle' colorPalette='accent'>
      Accent
    </Button>
    <Button emphasis='subtle' colorPalette='brand'>
      Brand
    </Button>
    <Button emphasis='subtle' colorPalette='information'>
      Information
    </Button>
    <Button emphasis='subtle' colorPalette='success'>
      Success
    </Button>
    <Button emphasis='subtle' colorPalette='warning'>
      Warning
    </Button>
    <Button emphasis='subtle' colorPalette='danger'>
      Danger
    </Button>
  </View>
  <View flexDirection='row' gap='200'>
    <Button emphasis='subtler' colorPalette='neutral'>
      Neutral
    </Button>
    <Button emphasis='subtler' colorPalette='accent'>
      Accent
    </Button>
    <Button emphasis='subtler' colorPalette='brand'>
      Brand
    </Button>
    <Button emphasis='subtler' colorPalette='information'>
      Information
    </Button>
    <Button emphasis='subtler' colorPalette='success'>
      Success
    </Button>
    <Button emphasis='subtler' colorPalette='warning'>
      Warning
    </Button>
    <Button emphasis='subtler' colorPalette='danger'>
      Danger
    </Button>
  </View>
</View>

Usage

<Button onClick={() => alert('Button pressed')}>
  Click me
</Button>