ExToggle

<VBox class="sapUiMediumMargin" width="100%">

  <ux7:ExTitle text="Basic States" level="h3" variant="section" />
  <FlexBox wrap="Wrap" class="sapUiSmallMarginBottom">
    <ux7:ExToggle id="togOff" label="Off" class="sapUiSmallMarginEnd" />
    <ux7:ExToggle id="togOn" label="On" checked="true" class="sapUiSmallMarginEnd" />
    <ux7:ExToggle id="togDisabled" label="Disabled" checked="true" enabled="false" class="sapUiSmallMarginEnd" />
    <ux7:ExToggle id="togLoading" label="Loading" loading="true" />
  </FlexBox>

  <ux7:ExTitle text="Label On / Off" level="h3" variant="section" />
   

  <ux7:ExTitle text="Color + Size" level="h3" variant="section" />
  <FlexBox wrap="Wrap">
    <ux7:ExToggle id="togSm" label="Small" size="sm" color="default" class="sapUiSmallMarginEnd" />
    <ux7:ExToggle id="togMd" label="Medium" size="md" color="success" class="sapUiSmallMarginEnd" />
    <ux7:ExToggle id="togLg" label="Large" size="lg" color="warning" class="sapUiSmallMarginEnd" />
    <ux7:ExToggle id="togXl" label="XL" size="xl" color="danger" />
  </FlexBox>

 

  <!-- 01 · Basic States -->
  <ux7:ExTitle text="01 · Basic States" level="h3" variant="section" />
  <FlexBox wrap="Wrap" class="sapUiSmallMarginBottom" gap="1rem">
    <ux7:ExToggle label="Default Off" />
    <ux7:ExToggle label="Default On" checked="true" />
    <ux7:ExToggle label="Disabled Off" enabled="false" />
    <ux7:ExToggle label="Disabled On" checked="true" enabled="false" />
    <ux7:ExToggle label="Loading" loading="true" />
  </FlexBox>

  <!-- 02 · Label On / Off -->
  <ux7:ExTitle text="02 · Custom labelOn / labelOff" level="h3" variant="section" />
  <FlexBox wrap="Wrap" class="sapUiSmallMarginBottom" gap="1rem">
    <ux7:ExToggle labelOn="Active" labelOff="Inactive" checked="true" />
    <ux7:ExToggle labelOn="Enabled" labelOff="Disabled" />
    <ux7:ExToggle labelOn="Yes" labelOff="No" checked="true" color="success" />
    <ux7:ExToggle labelOn="Online" labelOff="Offline" color="danger" />
  </FlexBox>

  <!-- 03 · Colors -->
  <ux7:ExTitle text="03 · Color variants" level="h3" variant="section" />
  <FlexBox wrap="Wrap" class="sapUiSmallMarginBottom" gap="1rem">
    <ux7:ExToggle label="Default" checked="true" color="default" />
    <ux7:ExToggle label="Success" checked="true" color="success" />
    <ux7:ExToggle label="Warning" checked="true" color="warning" />
    <ux7:ExToggle label="Danger" checked="true" color="danger" />
  </FlexBox>

  <!-- 04 · Sizes -->
  <ux7:ExTitle text="04 · Sizes — sm · md · lg · xl" level="h3" variant="section" />
  <FlexBox wrap="Wrap" alignItems="Center" class="sapUiSmallMarginBottom" gap="1.5rem">
    <ux7:ExToggle label="Small" size="sm" checked="true" />
    <ux7:ExToggle label="Medium" size="md" checked="true" />
    <ux7:ExToggle label="Large" size="lg" checked="true" />
    <ux7:ExToggle label="XL" size="xl" checked="true" />
  </FlexBox>

  <!-- 05 · Change event -->
  <ux7:ExTitle text="05 · Change event" level="h3" variant="section" />
  <FlexBox wrap="Wrap" alignItems="Center" class="sapUiSmallMarginBottom" gap="1rem">
    <ux7:ExToggle id="togEvent" label="Toggle me" change="onToggleChange" />
    <ux7:ExText id="lblToggleState" text="State: Off" />
  </FlexBox>
 

</VBox>