GitHub

Toggle

PreviousNext

GPUI Kit's toggle button, ghost or outlined, as ToggleButton.

Full
InteractiveToggle demo
<WrapPanel ItemSpacing="8" LineSpacing="8">
  <ToggleButton Content="Bold" IsChecked="True" />
  <ToggleButton Content="Italic" />
  <ToggleButton Content="Underline" IsEnabled="False" />
</WrapPanel>

Usage

The theme covers ToggleButton in full. A toggle is ghost by default: no border and a transparent background until it is hovered or checked, when it shows the accent. Classes="outline" adds the 1px border and the background. A toggle is at least as wide as it is tall, so a PathIcon alone makes a square. IsChecked is the state; a toggle draws no focus ring, as GPUI Kit's does not.

ClassEffect
outlineA 1px border and the background (ghost is the default)
xsmall, small, largeHeight 20, 24 and 36; medium, the default, is 32

Examples

The outlined variant, checked, unchecked and disabled.

Outline
InteractiveToggle demo: Outline
<WrapPanel ItemSpacing="8" LineSpacing="8">
  <ToggleButton Classes="outline" Content="Bold" IsChecked="True" />
  <ToggleButton Classes="outline" Content="Italic" />
  <ToggleButton Classes="outline" Content="Underline" IsEnabled="False" />
</WrapPanel>

The four sizes.

Sizes
InteractiveToggle demo: Sizes
<WrapPanel ItemSpacing="8" LineSpacing="8">
  <ToggleButton Classes="outline xsmall" Content="Extra small" IsChecked="True" />
  <ToggleButton Classes="outline small" Content="Small" IsChecked="True" />
  <ToggleButton Classes="outline" Content="Medium" IsChecked="True" />
  <ToggleButton Classes="outline large" Content="Large" IsChecked="True" />
</WrapPanel>

A PathIcon as the content makes a square toggle, ghost or outlined.

Icons
InteractiveToggle demo: Icons
<WrapPanel ItemSpacing="8" LineSpacing="8">
  <ToggleButton IsChecked="True">
    <PathIcon Data="{StaticResource Gpui.Icon.Star}" />
  </ToggleButton>
  <ToggleButton>
    <PathIcon Data="{StaticResource Gpui.Icon.Bell}" />
  </ToggleButton>
  <ToggleButton Classes="outline" IsChecked="True">
    <PathIcon Data="{StaticResource Gpui.Icon.Eye}" />
  </ToggleButton>
  <ToggleButton Classes="outline">
    <PathIcon Data="{StaticResource Gpui.Icon.PanelLeftOpen}" />
  </ToggleButton>
</WrapPanel>

Not covered

  • Nothing: the control's look is covered in full.