Django Join Component

Join connects adjacent buttons, inputs, or select elements into a visually unified group by removing the border radius between them. Use it for button groups, search-with-select combos, or pagination sets.

Basic Join

Preview

Code

<c-lb.join>
  <c-lb.button class="join-item">Button 1</c-lb.button>
  <c-lb.button class="join-item">Button 2</c-lb.button>
  <c-lb.button class="join-item">Button 3</c-lb.button>
</c-lb.join>

Vertical Join

Preview

Code

<c-lb.join direction="vertical">
  <c-lb.button class="join-item">Button 1</c-lb.button>
  <c-lb.button class="join-item">Button 2</c-lb.button>
  <c-lb.button class="join-item">Button 3</c-lb.button>
</c-lb.join>

With Inputs

Preview

Code

<c-lb.join>
  <c-lb.input type="text" placeholder="Search..." class="join-item" />
  <c-lb.button variant="primary" class="join-item">Search</c-lb.button>
</c-lb.join>

API Reference

`c-lb.join`

Property	Type	Default	Required	Description
class	string	-	No	Additional CSS classes to apply
direction	horizontal vertical	-	No	Layout direction

Slot Name	Description
default	Join items (use class='join-item' on children)