Blocks

Topbar Preferences

The language switch and the theme button together — one capsule for a top bar, or labelled rows for a menu.

A block from @tectra-ng/blocks — it comes with tectra-ng, or alone: npm install @tectra-ng/blocks.

Features3

API

Theming

Basic

One capsule for a top bar. raised puts it on the card colour with a shadow and paints the chosen language in the primary colour.

Plain

Raised

10 lines

<div class="bars">  <div class="bar">    <strong>Plain</strong>    <tx-topbar-preferences />  </div>  <div class="bar">    <strong>Raised</strong>    <tx-topbar-preferences raised />  </div></div>

Stacked

layout="stacked" shows labelled rows — for a mobile menu or a drawer.

Design tokens

dt changes the tokens of one capsule: here larger controls, more space and a taller divider.