ldy26098
/
BMAD-METHOD
mirror of https://github.com/bmad-code-org/BMAD-METHOD.git
1
0
Fork 0
Code Packages Projects Releases Wiki Activity
BMAD-METHOD/src/modules/wds/data/design-system/state-management.md

1.7 KiB
Raw Blame History

Component State Management

Purpose: Guidelines for defining and managing component states.

Referenced by: Component-type instructions (Button, Input, etc.)

Standard States

Interactive Components (Buttons, Links)

Required:

  • default - Normal, ready for interaction
  • hover - Mouse over component
  • active - Being clicked/pressed
  • disabled - Cannot interact

Optional:

  • loading - Processing action
  • focus - Keyboard focus

Form Components (Inputs, Selects)

Required:

  • default - Empty, ready for input
  • focus - Active input
  • filled - Has content
  • disabled - Cannot edit

Optional:

  • error - Validation failed
  • success - Validation passed
  • loading - Fetching data

Feedback Components (Alerts, Toasts)

Required:

  • default - Neutral information
  • success - Positive feedback
  • error - Error feedback
  • warning - Caution feedback

State Naming

Use standard names:

  • ✅ hover not mouseover
  • ✅ disabled not inactive
  • ✅ loading not processing

Be consistent across components.

State Transitions

Define how states change:

Button States: default → hover (mouse enters)
  hover → active (mouse down)
  active → hover (mouse up)
  hover → default (mouse leaves)
  any → disabled (programmatically)
  any → loading (action triggered)

Visual Indicators

Each state should be visually distinct:

Button:
  default: blue background
  hover: darker blue + scale 1.02
  active: darkest blue + scale 0.98
  disabled: gray + opacity 0.6
  loading: disabled + spinner

Reference this when specifying component states.