@jimka/typescript-ui

Appearance

ToggleButton ​

ToggleButton is a Button that switches between selected and unselected states on each click. Maintains a separate CSS rule for the .selected class so the active state can be styled independently.

Usage ​

typescript
import { Event } from '@jimka/typescript-ui/core';
import { ToggleButton } from '@jimka/typescript-ui/component/button';
const boldButton = ToggleButton('Bold');

Event.addListener(boldButton, 'change', () => {
    if (boldButton.isSelected()) {
        applyBold();
    } else {
        removeBold();
    }
});

toolbar.addComponent(boldButton);

The change event fires whenever the selection state flips.

Common methods ​

MethodPurpose
isSelected()Returns the current selection state.
setSelected(boolean)Programmatically set / clear the selection (does not fire change).
addBindingListener(fn)Subscribe to user-driven changes (used by Binding).

Mutual exclusivity ​

Wrap multiple ToggleButtons in a ButtonGroup to enforce single-selection semantics across the group. The group will deselect siblings whenever one button becomes selected.

Theming ​

Selected-state appearance comes from the toggle.selected.* token group — see Theming › Theme keys.

See also ​