# Customizing the Command Buttons

Customize the Command buttons shown in the Command bar by specifying the font style of the text, setting themes for the button images, etc.

## Content

You can customize how (and if) the command buttons are shown in the command bar. The figure below shows the default display of the command buttons using the images (or icon) type of display.
![Command Buttons (Images style)](https://cdn.mescius.io/document-site-files/images/346c9178-0ed8-4fb9-908b-1565b22fb408/artwork/commandbuttons-icon-withlabels.png)
The various settings of the command bar are handled using the [CommandBarInfo](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.CommandBarInfo.html) class.

* You can display the command buttons as images (also called icons), push buttons (with text), or links (with text). The default is to display them as images. This is the type of buttons displayed. You can also specify themes for the button images.
* You can change the appearance of the text of the command buttons (if you are using the button type) using the [Font](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.CommandBarInfo.Font.html) property.
* You can change the appearance of the command buttons using various button properties.
* You can display or not display the buttons on the command bar using the [Visible](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.CommandBarInfo.Visible.html) property.
* You can change the images (as described in [Changing the Command Button Images](/spreadnet/docs/latest/online-asp/overview/spweb-devguide/spweb-interaction/spweb-interact-toolbars/spweb-cmdbar-images))
* You can hide or show the Save Excel button on the CommandBar to quickly export your spreadsheets to Excel (using the [ShowExcelButton](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.CommandBarInfo.ShowExcelButton.html) property in the [CommandBarInfo](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.CommandBarInfo.html) class).

![Command Buttons (Save Excel button)](https://cdn.mescius.io/document-site-files/images/346c9178-0ed8-4fb9-908b-1565b22fb408/artwork/saveexcel.png)
For more information, please refer to [Working with the SaveExcel button on the CommandBar](/spreadnet/docs/latest/online-asp/overview/spweb-devguide/spweb-interaction/spweb-interact-toolbars/working-with-the-save-excel-button-on-the-commandbar).

* You can hide or show a PDF button for printing to PDF (using the [ShowPDFButton](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.CommandBarInfo.ShowPDFButton.html) property in the [CommandBarInfo](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.CommandBarInfo.html) class).
<br>
    ![Command Buttons (Print PDF button)](https://cdn.mescius.io/document-site-files/images/346c9178-0ed8-4fb9-908b-1565b22fb408/artwork/commandbar-printpdf.png)

Which command buttons appear in the command bar change if you set the [EnableClientScript](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.FpSpread.EnableClientScript.html) property to false for the component. Fewer buttons are displayed, due to the limitations of not providing scripting on the client.

## Command Bar Button Types

The type of buttons displayed in the command bar can be any of these types:

| **Button Type** | **Enumeration Setting** | **Typical Default Display** |
| ----------- | ------------------- | ----------------------- |
| Images (or icons) | ImageButton | ![Command Buttons ImageButton type](https://cdn.mescius.io/document-site-files/images/346c9178-0ed8-4fb9-908b-1565b22fb408/artwork/commandbuttons-imagebutton.png) |
| Text links | LinkButton | ![Command Buttons LinkButton type](https://cdn.mescius.io/document-site-files/images/346c9178-0ed8-4fb9-908b-1565b22fb408/artwork/commandbuttons-linkbutton.png) |
| Push-buttons | PushButton | ![Command Buttons PushButton type](https://cdn.mescius.io/document-site-files/images/346c9178-0ed8-4fb9-908b-1565b22fb408/artwork/commandbuttons-pushbutton.png) |

Refer to the [ButtonType](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.ButtonType.html) enumeration and the [ButtonType](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.CommandBarInfo.ButtonType.html) property. Note that the buttons appear grayed out or inactive until they can be used. The figures shown above show all the buttons active. The link type command button option requires that the client-side scripting be disabled ([FpSpread](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.FpSpread.html) class, [EnableClientScript](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.FpSpread.EnableClientScript.html) property set to false). Client-side operations such as cut, copy, and paste are not available when scripting is disabled so buttons for those operations do not appear on the command bar.
The properties that affect the appearance of the buttons include these:

| **CommandBarInfo Property** | **Appearance Description** |
| ----------------------- | ---------------------- |
| [ButtonFaceColor](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.CommandBarInfo.ButtonFaceColor.html) | the background color of the buttons |
| [ButtonHighlightColor](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.CommandBarInfo.ButtonHighlightColor.html) | the color of the top and left outline of the buttons |
| [ButtonShadowColor](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.CommandBarInfo.ButtonShadowColor.html) | the color of the bottom and right outline of the buttons |
| [Font](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.CommandBarInfo.Font.html) | the color of text in the buttons |

Remember that to update the data on the server, changes must be saved from the client. Changes from the client can be saved either by using the [SaveChanges](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.FpSpread.SaveChanges.html) method in code or by having the user click the Update button on the command bar.
For other ways to customize parts of the command bar, refer to [Customizing the Command Bar on the Component](/spreadnet/docs/latest/online-asp/overview/spweb-devguide/spweb-interaction/spweb-interact-toolbars/spweb-cmdbar-bar).

## Using the Properties Window

1. Select the FpSpread component.
2. With the **Properties** window open, select the **CommandBar** property drop-down list, and set any of the button properties.

## Using Code

Use the properties of the [CommandBarInfo](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.CommandBarInfo.html) class to define the appearance of the buttons.

## Example

In this example, some of the button properties of the command bar are set. The result is shown in this figure.
![Command Buttons from Example](https://cdn.mescius.io/document-site-files/images/346c9178-0ed8-4fb9-908b-1565b22fb408/artwork/commandbuttons-example.png)

```csharp
FpSpread1.CommandBar.Background = null;
FpSpread1.CommandBar.BackColor = Color.Yellow;
FpSpread1.CommandBar.ButtonFaceColor = Color.YellowGreen;
FpSpread1.CommandBar.ButtonTextColor = Color.RoyalBlue;
FpSpread1.CommandBar.ButtonType = FarPoint.Web.Spread.ButtonType.PushButton;
FpSpread1.CommandBar.Font.Bold = true;
FpSpread1.CommandBar.Font.Name = "Comic Sans MS";
FpSpread1.CommandBar.Visible = true;
```

```vbnet
FpSpread1.CommandBar.Background = Nothing
FpSpread1.CommandBar.BackColor = Color.Yellow
FpSpread1.CommandBar.ButtonFaceColor = Color.YellowGreen
FpSpread1.CommandBar.ButtonTextColor = Color.RoyalBlue
FpSpread1.CommandBar.ButtonType = FarPoint.Web.Spread.ButtonType.PushButton
FpSpread1.CommandBar.Font.Bold = True
FpSpread1.CommandBar.Font.Name = "Comic Sans MS"
FpSpread1.CommandBar.Visible = True
```

## Using the Spread Designer

1. Select **Spread** in the **Property** grid.
2. Select the CommandBar property drop-down list, and set any of the button properties.
3. Click **Apply** and **OK**.
4. Click **Apply and Exit** to close the Spread Designer.

> !type=note
> **Note:** While you set any of the button properties above, make sure that the [UseSheetSkin](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.CommandBarInfo.UseSheetSkin.html) property of the [CommandBarInfo Class](/spreadnet/api/latest/online-asp/FarPoint.Web.Spread/FarPoint.Web.Spread.CommandBarInfo.html) is set to false.