Button

The Button component is a fundamental UI element designed for interactions, offering a variety of styles, sizes, and colors to accommodate different use cases within an application. Additionally, a "ButtonGroup" is provided to layout multiple buttons in a cohesive unit, enhancing the visual consistency and usability of grouped actions.

Quick Start

To start using the Button component, import it from the reablocks library.

import { Button } from 'reablocks';


export default function App() {
  return <Button>Click Me</Button>
}

import { Button } from 'reablocks';

export default function App() {
  return <Button>Click Me</Button>
}

Examples

Basic Usage

The Button component supports several variants including "filled", "outline", and "text", allowing for flexibility in design and application:

{
  variants: {
    filled: "bg-gray-800 text-white hover:bg-gray-700 border-gray-800",
    outline: "bg-opacity-0 border-grey border",
    text: "bg-opacity-0 border-0"
  }
}

Advanced Customization

Sizes and Colors

Buttons can be customized further with size and color variations, providing a wide range of styling options to match your UI design:

Theme customization can be used to define the size variations for different button sizes:

{
    sizes: {
      small: 'text-sm px-2 py-1 leading-[normal]',
      medium: 'text-base px-4 py-2 leading-[normal]',
      large: 'text-xl px-5 py-2.5 leading-[normal]'
    }
    iconSizes: {
      small: 'p-1',
      medium: 'p-2',
      large: 'p-2.5'
    }
}

Theme customization can be used to define the color variations for different button types. This includes extending the default colors with custom colors:

{
    colors: {
      default: {
        filled: 'bg-gray-800 hover:bg-gray-700 border-gray-800',
        outline: 'border-secondary border',
        text: 'text-surface-content'
      },
      primary: {
        filled:
          'bg-primary hover:bg-primary-hover border-primary text-surface-content',
        outline: 'border border-primary',
        text: 'text-primary hover:text-primary-hover'
      },
      secondary: {
        filled:
          'bg-secondary hover:bg-secondary-hover border-secondary text-surface-content',
        outline: 'border border-secondary',
        text: 'text-secondary hover:text-secondary-hover'
      },
      success: {
        filled:
          'bg-success hover:bg-success-hover border-success text-surface-content',
        outline: 'border border-success',
        text: 'text-success hover:text-success-hover'
      },
      warning: {
        filled:
          'bg-warning hover:bg-warning-hover border-warning text-surface-content',
        outline: 'border border-warning',
        text: 'text-warning hover:text-warning-hover'
      },
      error: {
        filled: 'bg-error hover:bg-error-hover border-error text-surface-content',
        outline: 'border border-error',
        text: 'text-error hover:text-error-hover'
      },
      // custom color e.g. pink
      pink: {
        filled: 'bg-pink-500 hover:bg-pink-500-hover border-pink-500 text-surface-content',
        outline: 'border border-pink-500',
        text: 'text-pink-500 hover:text-pink-500-hover'
      }
    }
}

Buttons with Icon

Incorporating icons with text can enhance button functionality and user understanding:

Theme customization can be used to define the icon size and padding for different button sizes:

{
    adornment: {
    base: "flex",
    start: "pr-1",
    end: "pl-1",
    sizes: {
      small: "[&>svg]:w-3 [&>svg]:h-3",
      medium: "[&>svg]:w-4 [&>svg]:h-4",
      large" "[&>svg]:w-5 [&>svg]:h-5"
    }
  }
}

Group of Buttons

The ButtonGroup component allows for organizing multiple buttons together, which is particularly useful for related actions:

Blocks

This component is used in the following Blocks:

Forgot Password Login MFA Register Not Found Contact Billing Pricing Team

Theme Customization

The Button component comes with a default theme that can be customized for consistency with your application's design language:

root{}(10 keys)

Learn more about how to customize in the Theme documentation.

API

Customize the Button and ButtonGroup components through the following properties:

Button

Prop	Description	Default
`color`	Color variation of the button. `string`	`default`
`variant`	Style variant of the button. `string`	`filled`
`size`	The size variation of the button. `string`	`medium`
`fullWidth`	If true, the button will take up the full width of its container. `boolean`
`disableMargins`	If true, the margins of the button will be disabled. `boolean`
`disablePadding`	If true, the padding of the button will be disabled. `boolean`
`disableAnimation`	If true, the animation of the button will be disabled. `boolean`
`startAdornment`	Element to display before the Button content. `any`
`endAdornment`	Element to display after the Button content. `any`
`theme`	Theme for the Button. `ButtonTheme`
`ref`	The ref to the button element. `LegacyRef<HTMLButtonElement>`

ButtonGroup

Prop	Description	Default
`children` *	The Buttons to display in the group. `any`
`className`	Additional CSS classes to apply to the Button group `string`
`variant`	Style variant of the buttons. `"filled" \| "outline" \| "text"`
`size`	The size variation of the buttons. `"small" \| "medium" \| "large"`

Design and Usability Tips

Focus Indicators: Maintain visible focus indicators for keyboard navigation, aiding in accessibility and indicating the current interactive element to users.
Efficient Space Use: Optimize button sizes and padding to use space efficiently while ensuring touch targets meet accessibility standards (minimum 44x44 pixels).

Badge Chip