ExtrabbitCode Inventor ModernUi
Controls

Buttons

Default, accent, danger, disabled and icon buttons.

The standard Button is themed implicitly. Three keyed styles cover the common variants.

Default button

A flat button with a subtle border and hover glow - used for secondary actions.

<Button Content="Default" Width="120" />
Default button

Accent button

The primary action. Apply AccentButton for an accent-filled button with white text.

<Button Content="Primary" Width="120" Style="{DynamicResource AccentButton}" />
Accent button

States

Buttons show an outward glow on hover and a subtle highlight when pressed (all button styles behave the same way):

HoverPressed
Accent button on hoverAccent button pressed

Danger button

For destructive actions (delete, remove). Apply DangerButton.

<Button Content="Delete" Width="120" Style="{DynamicResource DangerButton}" />
Danger button

Disabled

Disabled buttons dim automatically.

<Button Content="Disabled" Width="120" IsEnabled="False" />
Disabled button

Icon buttons

IconButton is a borderless, compact button for toolbars and in-cell actions. It carries the icon font (and a 16px size) itself, so a bare glyph string is all it needs (see Icons).

<StackPanel Orientation="Horizontal">
  <Button Style="{DynamicResource IconButton}" ToolTip="Settings" Content="&#xE713;" />
  <Button Style="{DynamicResource IconButton}" ToolTip="Refresh" Margin="6,0,0,0" Content="&#xE72C;" />
  <Button Style="{DynamicResource IconButton}" ToolTip="Delete" Margin="6,0,0,0" Content="&#xE74D;" />
</StackPanel>
Icon buttons

Icon button toolbar

The usual list-header actions — expand / collapse / select all / deselect all — grouped on a panel-tinted surface, with a thin divider between the pairs.

<Border Background="{DynamicResource Brush.Panel}" CornerRadius="6" Padding="3"
        HorizontalAlignment="Left">
  <StackPanel Orientation="Horizontal">
    <Button Style="{DynamicResource IconButton}" ToolTip="Expand all" Content="&#xE70D;" />
    <Button Style="{DynamicResource IconButton}" ToolTip="Collapse all" Margin="4,0,0,0" Content="&#xE70E;" />
    <Border Width="1" Height="16" Margin="6,0,2,0" VerticalAlignment="Center"
            Background="{DynamicResource Brush.Border}" />
    <Button Style="{DynamicResource IconButton}" ToolTip="Select all" Margin="4,0,0,0" Content="&#xE73A;" />
    <Button Style="{DynamicResource IconButton}" ToolTip="Deselect all" Margin="4,0,0,0" Content="&#xE739;" />
  </StackPanel>
</Border>
Icon button toolbar

On this page