Theme Customization: Button Example

This section demonstrates the customization options available for buttons within our darkTheme. Our aim is to provide a flexible design that can be easily integrated across different parts of your application, ensuring consistency while offering room for customization.

Theme Properties Explaination

base: Sets the foundational style for all buttons, including text color, padding, and border radius.
disabled: Defines styles for disabled buttons, including cursor changes and color adjustments.
fullWidth: Adjusts the button to span the full width of its container.
group: Customizes the appearance of buttons when they are grouped together.
adornment: Configures styles for icons used within buttons, with size adjustments for small, medium, and large buttons.
sizes: Offers predefined size options for buttons, affecting padding, font size, and line height.
variants: Allows for different button styles, such as filled, outlined, or text-only.
colors: Provides color schemes for buttons based on their intended use (e.g., primary, secondary, success, or any custom color).

import { PartialReablocksTheme, ButtonTheme } from 'reablocks';
 
const buttonTheme: ButtonTheme = {
  base: 'bg-lime-600 text-gray-300',
  sizes: {
    small: 'p-2',
    medium: 'p-3',
    large: 'p-4'
  },
  colors: {
    default: {
      filled: 'bg-lime-600 hover:bg-lime-700',
      outline: 'border-lime-600',
      text: 'text-gray-300'
    }
  }
};
 
const customTheme: PartialReablocksTheme = {
  components: {
    button: buttonTheme,
    // other components themes
  }
};

Best Practices

Use the filled variant for primary actions to draw attention.
Reserve the outline and text variants for secondary actions or less prominent interfaces.
Consider the context and background when choosing button colors to ensure sufficient contrast and accessibility.

Blocks Icons