# Button

This topic covers details about button in C1Ribbon.

## Content

A Button is a clickable ribbon item that executes a command. Inside a button item, you can put any text or image as required.

The image below displays a ribbon application with **Clear Format** button and tooltip.

**![A snapshot of a button control](https://cdn.mescius.io/document-site-files/images/5560dc72-88a5-4eeb-a384-981194dfc831/images/buttons1.png)**

## Add Ribbon Button at Design-Time

The **Ribbon Button** 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 Button using the **Ribbon Button Floating ToolBar** or by editing the properties in the Properties Window. For more info on floating toolbars, refer this [topic](/componentone/docs/win/online-ribbon/concepts/designtimesupport/floatingtoolbar).

This image below shows the floating toolbar of Button.

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

## Add Button via Code

A ribbon button can also be added to the **C1Ribbon** control through the code. This can be done by 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="RibbonButton" data-popup-theme="ui-tooltip-green qtip-green">RibbonButton</span> class.

```vbnet
' Add ribbon button to the format group
Dim clearButton As RibbonButton = New RibbonButton("Clear Format", Image.FromFile("images\clearformat.png"))
clearButton.ToolTip = "Clear All Formatting"
formatGroup.Items.Add(clearButton)
```

```csharp
// Add ribbon button to the format group
RibbonButton clearButton = new RibbonButton("Clear Format", Image.FromFile(@"images\clearformat.png"));
clearButton.ToolTip = "Clear All Formatting";
formatGroup.Items.Add(clearButton);
```

## Change ForeColor

The ForeColor of an item typically refers to its text color. Users can change the ForeColor of the ribbon button item. The **C1Ribbon** class provides the **UpdatingItemStyle** event, which occurs before a style is applied to a ribbon item.

![Ribbon UI with Home tab](https://cdn.mescius.io/document-site-files/images/5560dc72-88a5-4eeb-a384-981194dfc831/images/update-style-event-button.png)

Let's see how to change the ForeColor of RibbonButton by setting the UpdatingItemStyle event in the code snippet.

```csharp
//Handle UpdatingItemStyle event to set forecolor of RibbonButton
private void C1Ribbon1_UpdatingItemStyle(object sender, UpdatingItemStyleEventArgs e)
{
    if (e.RibbonItem.GetType() == typeof(RibbonButton))
    {
        e.ForeColor = Color.Blue;
    }
}
```