What are Blocks ?

Blocks are the smallest self contained components that provide a piece of information, action, or navigation option to the user of the app. They are generally mapped to a specific HTML tag, or related tags.

They are implemented using the web platform’s capabilities and with help from the examples provided in Inclusive Components.

Blocks can be combined in compositions using Layout components and classes to create interfaces that apply HTML semantics to convey document structure.

Example

The examples below are two ways of achieving the same end result: a button that will submit the <form> that contains it.

HTML markup

<button id="submit">Submit</button>

A Svelte Button component

<Button id="submit" text="Submit" />

What is the point of creating a Button component ? (regardless of the choice of framework)

Here are a few answers to that:

solving state management in one place
solving style management in one place
implementing and improving accessibility standards
maintaining design choices as the application grows
establishing conventions
documenting usage in one place

The example above uses the simplest, most trivial <button> element, but it is an element that deserves attention as it is ubiquitous in most applications, yet it is often sadly mistreated.

We can do better!

In this library you will find 4 distinct button blocks: Button Expand, Switch, and Toggle. They all contain a <button> and share some props, such as size and color for styling, or text and formaction to encode meaning and action. But each of these components is used in different contexts and with different semantic intentions: the components help encapsulate these specificities to make their usage consistent throughout the app.

To keep this project manageable, the UI library grows in response to application needs: the addition of each button component mentioned above is the result of a use case that needed it.

Using Forms

Blocks include components that contain<input> and <button> elements. For these components to have an effect without JavaScript enabled, they must be inside a <form> element. By default, a <button> without a type attribute will be considered a submit button: on click, or if the user presses Enter, the button will submit the form it belongs to.

Resources

Usage

Related Components

Resources

Playbook