Basic Toggle Multi Vertical Variants API

Basic Group

default One Two Three with spacing A B C <button-group-fc> <button-fc>One</button-fc> <button-fc>Two</button-fc> <button-fc>Three</button-fc> </button-group-fc>

Toggle Mode (Single Selection)

alignment Left Center Right center view mode Grid List Table grid <button-group-fc mode="toggle"> <button-fc value="left">Left</button-fc> <button-fc value="center" active>Center</button-fc> <button-fc value="right">Right</button-fc> </button-group-fc>

Multi Mode (Multiple Selection)

text format B I U S ["bold"] filters Photos Videos Audio Docs ["videos","audio"] <button-group-fc mode="multi"> <button-fc value="bold" active>B</button-fc> <button-fc value="italic">I</button-fc> <button-fc value="underline">U</button-fc> </button-group-fc>

Vertical Orientation

stacked Top Middle Bottom One Two Three <button-group-fc orientation="vertical"> <button-fc>Top</button-fc> <button-fc>Middle</button-fc> <button-fc>Bottom</button-fc> </button-group-fc>

With Button Variants

primary Save Save As sizes Tiny Buttons Large Buttons

Attributes

Attribute	Values	Description
mode	toggle | multi	Selection mode
orientation	vertical	Stack vertically
spacing	boolean	Gap between buttons

Events

Event	Detail
change	{ value } - string (toggle) or array (multi)

Import

<link rel="stylesheet" href="button-fc.css"> <link rel="stylesheet" href="button-group-fc.css"> <script type="module" src="button-fc.js"></script> <script type="module" src="button-group-fc.js"></script>