SusBtnToggle

Exclusive (or multi) mode switch — a row of buttons backed by Items + Model.

Package

SusKit · Atoms (commercial)

Open in Playground

SusKit · Atoms

Props

Name	Type	Default
Model	Prop<string>	""	v-model
Multiple	Prop<bool>	false	v-model
Mandatory	Prop<bool>	true	v-model
Divided	Prop<bool>	true	v-model
Disabled	Prop<bool>	false	v-model
Color	Prop<string>	"primary"	v-model
Variant	Prop<string>	"outlined"	v-model
Size	Prop<string>	"small"	v-model

Slots

No slots.

Events

Name	Field	Payload
Change	OnChange	string

Style hooks

USS class contract — override appearance without touching C#. States toggle via these classes:

• sus-btn-toggle
• sus-btn-toggle__btn
• sus-btn-toggle__btn--first
• sus-btn-toggle__btn--last
• sus-btn-toggle__row
• sus-btn-toggle--disabled
• sus-btn-toggle--divided
• sus-btn-toggle--multiple
• sus-button--active
• sus-button--color-danger
• sus-button--color-info
• sus-button--color-secondary
• sus-button--color-success
• sus-button--color-warning

Usage

var toggle = new SusBtnToggle();
toggle.Items.Value = new List<SusBtnToggle.BtnToggleItem>
{
    new() { Label = "List", Value = "list", Icon = "list" },
    new() { Label = "Grid", Value = "grid", Icon = "grid" },
    new() { Label = "Map", Value = "map", Icon = "map" },
};
toggle.Model.Value = "list";
toggle.Mandatory.Value = true;
toggle.Divided.Value = true;
toggle.Variant.Value = "outlined";
toggle.Size.Value = "small";
toggle.OnChange += value => { /* … */ };

Prop	Role
Items	List<BtnToggleItem> — Label, Value, Icon, Disabled
Model	Selected value (single mode)
Multiple / Selection	Multi-select mode + selected values
Mandatory	Keep at least one selected
Divided	Visual separators between buttons

Variant

elevated · flat · tonal · outlined · text · plain