Fouad One · V8
COMPONENT · STABLE

BlockButton

Reusable BlockButton contract shared across FouadDev hosts where the workflow requires it.

Status: stable contract · Owner: FouadDev Design System · Review: 2026-08-27.

Usage

Use only when the component solves the named task. Preserve existing business behavior and permissions.

Anatomy

Semantic container, visible content/label, interaction state and accessible name when interactive.

Variants & states

Default, focus, pressed/selected when applicable, disabled, loading, error, success and long-content stress.

Content

Labels are concise and action-oriented. Errors explain what happened and what to do next.

Accessibility

Keyboard reachable where interactive, visible focus, sufficient target size and no color-only meaning.

Web

Consumes semantic tokens from fouad-one-v950.css; no remote dependency.

Android

Maps to semantic resources in values/ and values-night/; 48dp touch targets.

Light / Dark

Both modes use dedicated semantic values, not inversion.

Do / Don’t

Do preserve task hierarchy. Don’t invent decorative variants or duplicate an existing action.

Tests

Keyboard, long text, 4 theme matrices, 320–1920 Web where relevant, Android font scaling when native.