Skip to main content

Component Design

Principle​

Components must be designed so that their purpose, state and interactions are always clear, accessible and consistent across the interface.

Component States​

Guidance​

  • Define visual states for all interactive components:
    • default
    • hover (if applicable)
    • focus (must be clearly visible)
    • active (optional)
    • disabled
  • Hover and active states may be communicated by color changes alone (e.g., lightening or darkening the background).
  • All states must meet required contrast ratios (text, icons, borders).
  • Focus must always remain clearly visible and meet contrast requirements.
  • Ensure all states remain perceivable in both light and dark themes.

WCAG Reference​

Icon-Only Components​

Guidance​

  • Use icon-only buttons sparingly; prefer text labels whenever possible.
  • If an icon-only button is necessary, its meaning must be unmistakable from the icon alone.
  • Avoid ambiguous symbols that depend on color or context to make sense.
  • Allow enough size and spacing so the icon remains clear at all resolutions.
  • The design must specify a clear text alternative (accessible name) for screen readers.
  • The accessible name should clearly describe the action (e.g. “Open menu”, “Close dialog”).

WCAG Reference​

Input Labels and Instructions​

Guidance​

  • Placeholder text should not be used to convey important information or instructions. Always provide a visible label and, when needed, persistent instructions.
  • When an input requires a specific format, provide instructions before the user submits the form.
  • Use examples where helpful, e.g. “DD/MM/YYYY” or “+420 123 456 789”.
  • Error messages should repeat or clarify the required format when validation fails.

Error and Success States​

Guidance​

  • Use both color and a secondary visual cue (icon, text label, border style).
  • Error messages must clearly explain the problem and how to fix it, and be clearly associated with the affected input.
  • Success messages should be clear but less visually dominant than errors.
  • Borders of inputs in error state must remain perceivable and have sufficient contrast.

Touch Target Size​

Guidance​

  • Minimum touch target size: ~24 × 24 px (WCAG 2.2 AA minimum).
  • Recommended touch target size: 40–44 × 44 px.
  • Adequate spacing between adjacent touch elements is essential — smaller targets may be acceptable only if a 24px area around them does not overlap adjacent targets.
  • Icons or small visual elements must be placed inside a sufficiently large tappable area (hitbox or padding).
  • Visual size and interactive size are not the same — the tappable area may be larger than the visible icon or label.
    • Designers should define or clearly indicate the intended hit area in their designs.
    • Developers must implement the hit area consistently (padding, invisible box, etc.).
  • Interactions that require dragging or complex gestures must provide a simple alternative (e.g. buttons or controls).

Icon button spacing and touch target size examples.

WCAG Reference​

Visual Consistency​

Guidance​

  • Components should use consistent visual styling (corner radius, border width, spacing, iconography, typography).
  • Components of the same type must look visually unified across screens and breakpoints.
  • Avoid minor ad-hoc variations of the same component — all changes must come from the design system.
  • The same visual component must always represent the same meaning and behavior. For example, primary actions always look like primary actions; inputs always look like inputs.
  • For global behavioral and visual consistency rules, see section Predictability and Consistency.

Accessibility Considerations During Design​

Guidance​

  • Ensure all components remain usable with text zoom and increased spacing.
  • Ensure all interactive components have a clearly defined and visible focus state.
  • Do not rely on external labels or separate instructions that are far from the component. Ensure all interactive elements have a clear and visible label.