Internship
Student login
← Design Systems learning path
Design Systems · Module 5 of 10

Components and variants

Components come in variants, sizes and states.

📖 Key ideas

  1. A button may have variants: primary, secondary, ghost, danger.
  2. States: default, hover, focus, active, disabled, loading.
  3. Sizes: small, medium, large, using tokens.
  4. Props or properties control variants in code and in Figma.
  5. Keep components small and composable (Card = header + body + footer).
💡 Real-life example: Like a school uniform: same design, but in sizes and in summer and winter versions.
VariantA styled version of a component
StateCondition like hover or disabled
PropInput that configures a component in code
ComposableBuilt from smaller parts