🎨 ⏐ Themeing

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.