Fill Component

index

3

status

Draft

The Fill component creates colored or gradient backgrounds for elements. It responds to the parent Element’s interactive state and supports variants.

Basic Usage

<Fill color="dodgerblue" elevation={0} />

Props

• color – Background color (any valid CSS color)
• opacity – Fill opacity (0-1)
• gradient – CSS gradient string (overrides color when provided)
• elevation – Z-index stacking order
• variants – State-specific property overrides

Gradients

<Fill 
  gradient="linear-gradient(to bottom, #ff0000, #0000ff)" 
  elevation={0} 
/>

Interactive Variants

Fill components can change appearance based on element state:

<Fill 
  color="blue" 
  elevation={0}
  variants={{
    default: { opacity: 1 },
    hover: { 
      color: "lightblue", 
      opacity: 0.9 
    },
    pressed: { 
      color: "darkblue" 
    }
  }}
/>