<%= render(Primer::BaseComponent.new(tag: "toggle-switch", **@system_arguments)) do %> <%= render(Primer::Beta::Octicon.new(size: :small, color: :danger, icon: :"alert-fill", hidden: "true", data: { target: "toggle-switch.errorIcon" })) %> <%= render(Primer::Beta::Spinner.new(size: :small, hidden: "true", data: { target: "toggle-switch.loadingSpinner" })) %> <%= render(Primer::Beta::Text.new(aria: { hidden: true }, classes: "ToggleSwitch-status")) do %> <%= render(Primer::Box.new(classes: "ToggleSwitch-statusOn").with_content("On")) %> <%= render(Primer::Box.new(classes: "ToggleSwitch-statusOff").with_content("Off")) %> <% end %> <%= render(Primer::BaseComponent.new(tag: :button, classes: "ToggleSwitch-track", disabled: disabled?, data: { target: "toggle-switch.switch", action: "click:toggle-switch#toggle" }, **@aria_arguments)) do %> <%= render(Primer::Box.new(classes: "ToggleSwitch-icons", aria: { hidden: true })) do %> <%= render(Primer::Box.new(classes: "ToggleSwitch-lineIcon")) do %> <%= render(Primer::BaseComponent.new( tag: :svg, width: @size == :small ? 12 : 16, height: @size == :small ? 12 : 16, viewBox: "0 0 16 16", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", aria: { hidden: true }, focusable: false )) do %> <% end %> <% end %> <%= render(Primer::Box.new(classes: "ToggleSwitch-circleIcon")) do %> <%= render(Primer::BaseComponent.new( tag: :svg, width: @size == :small ? 12 : 16, height: @size == :small ? 12 : 16, viewBox: "0 0 16 16", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", aria: { hidden: true }, focusable: false )) do %> <% end %> <% end %> <% end %> <%= render(Primer::Box.new(classes: "ToggleSwitch-knob")) %> <% end %> <% end %>