Variants and State Management

index

9

status

Draft

Blueprint components support variants — different visual configurations for different interactive states. This allows for sophisticated state-based animations and demonstrations.

Supported States

• default – Normal state, allows user interaction
• hover – Mouse hover state
• pressed – Mouse/touch pressed state
• focus – Keyboard focus state

Variant Structure

Variants are defined as objects where keys are state names and values are property overrides:

variants={{
  default: {
    // Default state properties
  },
  hover: {
    // Hover state overrides
  },
  pressed: {
    // Pressed state overrides
  }
}}

Property Merging

Variant properties are merged with base properties, with variants taking precedence. If a property isn’t specified in a variant, the base property value is used.

Transform Variants (Element only)

Element components support transform-specific variants:

<Element 
  variants={{
    default: {
      translateY: "0px",
      scale: 1,
      rotate: "0deg"
    },
    hover: {
      translateY: "-2px",
      scale: 1.02
    }
  }}
>

Visual Property Variants (Fill, Shadow, Content)

Other components support visual property variants:

<Fill 
  color="blue" 
  variants={{
    hover: { color: "lightblue" },
    pressed: { color: "darkblue" }
  }}
/>

<Shadow 
  blur="4px"
  variants={{
    hover: { blur: "8px", opacity: 0.3 },
    pressed: { blur: "2px", opacity: 0.1 }
  }}
/>

Controlled vs Interactive States

• When state="default", the element responds to user interaction
• When state is set to a specific state name, the element is locked to that state
• This allows authors to demonstrate specific states without requiring user interaction