The WijRibbon widget is a UI control that looks like a toolbar. The wijribbon can be used as the full ribbon UI or as a simple ribbon UI that allows you to save screen real estate. Wijmo provides css for defining ribbon button. All you need to do is define the 'button' tags and use predefined wijribbon button classes. When these predefined button classes are used, the buttons are created with desired text and image. For example, following html can be used to create Cut, Copy and Paste buttons :

 <button title="Cut" name="cut" class="wijmo-wijribbon-cut">  
 </button>  
 <button title="Copy" class="wijmo-wijribbon-copy" name="copy">  
 </button>  
 <button title="Paste" class="wijmo-wijribbon-paste" name="paste">  
 </button>

This blog explains how to add a button in WijRibbon with user defined text, image and styles.

Adding Button

To add a button with custom text then you need to use wijmo--wijribbon-button class as :

<button title="Add" name="add" class="wijmo-wijribbon-button" >  
<span>Add</span> </button>

The above code will add a button with text 'Add'. Similarly, we'll add two more buttons - 'Delete' and 'Refresh'. The toolbar will look like the image below :

Adding Image to a Ribbon Button

Now to add images to the above created button, we need to customize the wijmo-wijribbon-button class in css as : [css].wijmo-wijribbon-button { background :url("Add.ico") !important; }[/css] To add buttons with different images, then use different wijmo-wijribbon-button classes as : [css].wijmo-wijribbon-button { background :url("Add.ico") !important; } .wijmo-wijribbon-button1 { background :url("Delete.ico") !important; } .wijmo-wijribbon-button2 { background :url("Search.ico") !important; }[/css] When this is done, we'll change the html code for defining WijRibbon as :

<div id="ribbon">  
 <button title="Add" name="add" class="wijmo-wijribbon-button">  
 <span>Add</span> </button>  

 <button title="Delete" name="delete" class="wijmo-wijribbon-button1">  
 <span >Delete</span> </button>  

 <button title="Search" name="search" class="wijmo-wijribbon-button2">  
 <span >Search</span> </button>  
</div>

WijRibbon with images will look like :

Adding Different Styles to Ribbon Buttons

Adding styles to Ribbon buttons is as easy as adding images. To add an image you need to use wijmo-wijribbon .ui-button class as : [css].wijmo-wijribbon .ui-button { color: red; background-color: yellow; }[/css] To add different styles to different buttons, you can use the css using the button title. For instance, for setting styles for 'Delete' button [css]button[title="Delete"].ui-button{ color: white; background-color: red; }[/css] Download the attached sample for the complete code. Download Sample