Onsen UI CSS Component Toolbar with Outline Button Last Updated : 23 Jul, 2025 Comments Improve Suggest changes Like Article Like Report 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 will see the Onsen UI CSS Component Toolbar with Outline Button. The toolbar is a horizontal bar with some toolbar items and icons. Onsen UI CSS Component Toolbar with Outline Button is used to create the outline button inside the toolbar using toolbar-button--outline class. Onsen UI CSS Component Toolbar with Outline Button Class: toolbar-button--outline: This class is used to create the outline button inside the toolbar. Syntax: <div class="toolbar"> <div class="toolbar__left"> <span class="toolbar-button toolbar-button--outline"> ... </span> </div> </div> Example 1: The following example demonstrates the Onsen UI CSS Component Toolbar with Outline Button. HTML <!DOCTYPE html> <html> <head> <!-- CDN links of Onsen UI library --> <link rel="stylesheet" href= "https://unpkg.com/[email protected]/css/onsenui.css"> <link rel="stylesheet" href= "https://unpkg.com/[email protected]/css/onsen-css-components.min.css"> <script src= "https://unpkg.com/[email protected]/js/onsenui.min.js"> </script> </head> <body> <center> <h2 style="color: green;"> GeeksforGeeks </h2> <strong> Onsen UI CSS Component Toolbar with Outline Button </strong> <br> <br> <div class="toolbar"> <div class="toolbar__left"> <span class="toolbar-button toolbar-button--outline"> Home </span> </div> <div class="toolbar__center"> <span class="toolbar-button toolbar-button--outline"> About Us </span> </div> <div class="toolbar__right"> <span class="toolbar-button toolbar-button--outline"> Logout </span> </div> </div> </center> </body> </html> Output: Example 2: The following example demonstrates the Onsen UI CSS Component Toolbar with Outline Button. HTML <!DOCTYPE html> <html> <head> <!-- CDN links of Onsen UI library --> <link rel="stylesheet" href= "https://unpkg.com/[email protected]/css/onsenui.css"> <link rel="stylesheet" href= "https://unpkg.com/[email protected]/css/onsen-css-components.min.css"> <script src= "https://unpkg.com/[email protected]/js/onsenui.min.js"> </script> </head> <body> <center> <h2 style="color: green;"> GeeksforGeeks </h2> <strong> Onsen UI CSS Component Toolbar with Outline Button </strong> <br> <br> <div class="toolbar"> <div class="toolbar__left"> <span class="toolbar-button toolbar-button--outline"> <i class="ion-ios-star"></i> </span> </div> <div class="toolbar__center"> <span class="toolbar-button toolbar-button--outline"> <i class="ion-ios-hammer"></i> </span> </div> <div class="toolbar__right"> <span class="toolbar-button toolbar-button--outline"> <i class="zmdi zmdi-pin-account"></i> </span> </div> </div> </center> </body> </html> Output: Reference: https://onsen.io/v2/api/css.html#toolbar-category Comment More infoAdvertise with us Next Article Onsen UI CSS Component Toolbar with Segment H harendra4373 Follow Improve Article Tags : Web Technologies CSS Onsen-UI Onsen-UI CSS-Components Similar Reads Onsen UI CSS Component Outline Button 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. Buttons are one of the most common UI elements. When we want to perform some action and want to navigate to a different p 2 min read Onsen UI Toolbar Button CSS Components 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 use 2 min read Onsen UI CSS Component Basic Toolbar Button 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. Onsen UI CSS Component Basic Toolbar Button is used to create the basic toolbar buttons using the below Onsen UI Toolbar 2 min read Onsen UI CSS Component Toolbar with Segment 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 will see the Onsen UI CSS Component Toolbar with Segment. The toolbar is a horizontal bar with some t 2 min read Onsen UI CSS Component Quiet Button 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. Buttons are one of the most common UI elements. When we want to perform some action and want to navigate to a different p 2 min read Onsen UI CSS Component Material Toolbar Button 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. Onsen UI CSS Component Material Toolbar Button is used to create the material toolbar buttons using the toolbar-button--m 2 min read Like