Skip to content
Teasim
TeaCSS documentation
StyleSheet

Join

Adjacent controls with welded visible edges.

Adjacent controls with welded visible edges. These classes belong to the opt-in Official preset. Add @presets "standard,official"; to the CSS entry. Standard supplies the utilities, palette, and preflight used alongside these structural shortcuts.

Classes

  • join, join--block, join-separator, join-text

Example

The markup below shows the structure. Follow the linked Storybook specimen for its complete styling and, where relevant, interactive behavior.

html
<div class="join" role="group" aria-label="View mode">
  <button type="button" aria-pressed="true">List</button>
  <button type="button" aria-pressed="false">Grid</button>
</div>

Variants and composition

join–block changes the joining axis. join-separator and join-text add dividers or shared text to the joined control group.

Behavior and accessibility

Use role=group or fieldset with a name for related controls. Selection state and action handling are consumer-owned; a single child keeps its full outer radius.

Reference

See the interactive Storybook specimen. Continue to Keyboard key or return to the Official preset overview.