Onsen UI Toolbar Button CSS Components

Last Updated : 21 Jun, 2022

Onsen UI CSS is used to create beautiful HTML components. It is one of the most efficient ways to create HTML5 hybrid components that are compatible with both mobile and desktop. In this article, we are going to implement the Onsen UI Toolbar button CSS Component.

The Toolbar Button Component is used to display a toolbar button inside the toolbar. There are two types of toolbar buttons, namely a simple toolbar button and a material toolbar button.

Onsen UI Toolbar Button CSS Component Classes:

toolbar-button: This class is used to create a toolbar button.
toolbar-button–material: This class is used to create a material toolbar button.
toolbar-button–outline: This class is used to make the transparent background button.

Syntax:

<button class="toolbar-button">
  <i class="..."></i>
</button>

Example 1: The following example demonstrates the use of the toolbar-button class of the Onsen UI toolbar button CSS component. The icons are inserted using the HTML <i> tag and the font-awesome library.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8" />
    <meta name="viewport"
          content="width=device-width, 
                   initial-scale=1.0" />
    <title>GeeksforGeeks | Onsen UI CSS</title>
    <link rel="stylesheet" href=
"https://unpkg.com/onsenui/css/onsenui.css" />
    <link rel="stylesheet" href=
"https://unpkg.com/onsenui/css/onsen-css-components.min.css" />
    <link rel="stylesheet" href=
"http://fortawesome.github.io/Font-Awesome/" /> 
</head>
 
<body>
    <center>
        <h2 style="color:green">GeeksforGeeks</h2>
        <strong>Onsen UI Toolbar button CSS Component</strong>
        <br/>
        <button class="toolbar-button">
            <i class="fa fa-bell" style="font-size:17px"></i>
                New Notification 
        </button>
    </center>
</body>
</html>

Output:

Example 2: The following example demonstrates the use of toolbar-button–material class of the Onsen UI toolbar button CSS component. The buttons can be created using HTML <span> tag as shown below.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8" />
    <meta name="viewport"
          content="width=device-width, 
                   initial-scale=1.0" />
    <title>GeeksforGeeks | Onsen UI CSS</title>
    <link rel="stylesheet" href=
"https://unpkg.com/onsenui/css/onsenui.css" />
    <link rel="stylesheet" href=
"https://unpkg.com/onsenui/css/onsen-css-components.min.css" />
    <link rel="stylesheet" href=
"http://zavoloklom.github.io/material-design-iconic-font/" />
</head>
 
<body>
    <center>
        <h2 style="color:green">GeeksforGeeks</h2>
            <strong>
                Onsen UI Material Toolbar button CSS Component
            </strong>
        <br/>
        <br>
        <span class="toolbar-button toolbar-button--material">
            <i class="zmdi zmdi-menu"></i>
            Menu details 
        </span> 
        <span class="toolbar-button toolbar-button--material">
          <i class="zmdi zmdi-favorite"></i>
          Favourite cuisine
        </span> 
    </center>
</body>
</html>