SushiSwitch

A customizable toggle switch component for the Sushi design system.

SushiSwitch provides a standard switch component with support for:

• Primary and secondary text labels
• Custom positioning (switch at start or end)
• Vertical alignment control
• Customizable colors
• Custom content through the infoContent parameter
• Accessibility through semantic properties

Switches are typically used to toggle between two states (on/off) for a single option.

Example

The SushiSwitch component is used to create toggle switches for settings and preferences.

var notificationsEnabled by remember { mutableStateOf(true) }

SushiSwitch(
    props = SushiSwitchProps(
        isChecked = notificationsEnabled,
        text = SushiTextProps(
            text = "Push Notifications",
            type = SushiTextType.Medium500
        ),
        subText = SushiTextProps(
            text = "Receive alerts about new offers and updates",
            type = SushiTextType.Regular300,
            color = SushiTheme.colors.text.secondary
        )
    ),
    onCheckedChange = { notificationsEnabled = it },
    modifier = Modifier.padding(vertical = 4.dp)
)

Component API

SushiSwitch

Parameter	Description
id	Optional identifier for the switch
isChecked	Whether the switch is checked (on) or unchecked (off)
text	Primary text properties to display alongside the switch
subText	Secondary text properties to display below the primary text
isEnabled	Whether the switch is interactive (true) or disabled (false)
color	The color for the switch when checked
padding	The padding around the switch component
verticalAlignment	The vertical alignment of the switch relative to its text
direction	The position of the switch relative to its text (Start or End)