# Toggle Button

This topic covers toggle button item in C1Ribbon.

## Content

A toggle button is a command button that allows the user to switch between two states. When a user clicks on a toggle button, it switches to the pressed/active state and on consecutive clicking, it returns back to the unpressed/inactive state.

The GIF below shows a toggle button with tooltip:

![Toggle button](https://cdn.mescius.io/document-site-files/images/5560dc72-88a5-4eeb-a384-981194dfc831/images/togglebutton.gif)

### Adding ToggleButton at Design-Time

The **Ribbon ToggleButton** can be added at design-time using the **Ribbon Group Floating Toolbar** or **RibbonGroup Items Collection Editor**. Also, you can customize the look of the Ribbon ToggleButton using the **Ribbon** **ToggleButton** **Floating ToolBar** or by editing the properties in the **Properties** Window. For more information about floating toolbars, refer this [topic](/componentone/docs/win/online-ribbon/concepts/designtimesupport/floatingtoolbar).

The image below depicts the floating toolbar of Ribbon ToggleButton.

![Floating toolbar](https://cdn.mescius.io/document-site-files/images/5560dc72-88a5-4eeb-a384-981194dfc831/images/tb_ft.png)

### Adding ToggleButton through Code

A toggle button can also be added to the C1Ribbon control through the code using the <span data-popup-content="This class is available in \u003ca href=\u0022/componentone/docs/win/online-ribbon/\u0022\u003e.NET\u003c/a\u003e and \u003ca href=\u0022/componentone/docs/win/online-ribbon/\u0022\u003e.NET Framework\u003c/a\u003e." data-popup-title="RibbonToggleButton" data-popup-theme="ui-tooltip-green qtip-green">RibbonToggleButton</span> class. This is depicted in the code below.

```vbnet
' Add toggle button to the format group
Dim leftAlign As RibbonToggleButton = New RibbonToggleButton(Image.FromFile("images\align_left.png"))
leftAlign.ToolTip = "Align your content with left margin."
formatGroup.Items.Add(leftAlign)
```

```csharp
// Add toggle button to the format group
RibbonToggleButton leftAlign = new RibbonToggleButton(Image.FromFile(@"images\align_left.png"));
leftAlign.ToolTip = "Align your content with left margin.";
formatGroup.Items.Add(leftAlign);
```

### Creating Toggle Button Group

A user can create groups of mutually exclusive **Toggle Buttons** in Ribbon control with the help of **ToggleGroupName** property of the **RibbonToggleButton** class.

![Group](https://cdn.mescius.io/document-site-files/images/5560dc72-88a5-4eeb-a384-981194dfc831/images/togglebuttongroup.gif)

Complete the following steps to create a **Toggle Group**:

1. Choose a **Ribbon Group** to which you would like to add a group of toggle buttons. Click on the Ribbon Group to activate its floating toolbar.
2. Click the **Actions** drop-down button. Select **Add Toggle Button** from the list. This adds a labeled toggle button on your Ribbon control.
3. Select the toggle button to activate the button's floating toolbar.
4. Click the **Miscellaneous Settings** button to open the **Miscellaneous** dialog box.
5. Enter a suitable group name for the **ToggleGroupName** property. Continue to build the group by adding more toggle buttons and setting their ToggleGroupName property to a common group name.

For instance, the Toggle Group Name depicted in the image is **Edit**.

![Toggle group](https://cdn.mescius.io/document-site-files/images/5560dc72-88a5-4eeb-a384-981194dfc831/images/togglebuttongroup_1.png)