Open In App

jQuery UI Button showLabel Option

Last Updated : 24 Mar, 2021
Improve
Improve
Like Article
Like
Save
Share
Report

jQuery UI consists of GUI widgets, visual effects, and themes implemented using HTML, CSS, and jQuery. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Button showLabel option is used to show the label. If we set showLabel value to false no text will be displayed, but the icon option must be used, otherwise, the showLabel option will be ignored.

Syntax:

$( ".selector" ).button({
  showLabel: false
});

CDN Link: First, add jQuery UI scripts needed for your project.

<link rel=”stylesheet” href=”//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css”>
<script src=”//code.jquery.com/jquery-1.12.4.js”></script>
<script src=”//code.jquery.com/ui/1.12.1/jquery-ui.js”></script>

Example:

HTML




<!doctype html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href=
    "//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.12.4.js"></script>
    <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
  
<body>
    <h1 style="color: green;">GeeksforGeeks</h1>
  
    <h3>jQuery UI Button showLabel option</h3>
  
    <button>Button</button>
  
    <script>
        $("button").button({
            icon: "ui-icon-circle-arrow-e",
            showLabel: false
        });
    </script>
</body>
  
</html>


Output:

Reference: https://api.jqueryui.com/button/#option-showLabel


Previous Article
Next Article

Similar Reads

jQuery Mobile Button Widget corners Option
jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be using the jQuery Mobile Button Widget corners option to set the style of the button corner. This option accepts the boolean value. It sets the border radius if its value is true. Syntax:
1 min read
jQuery UI Button icon Option
jQuery UI consists of GUI widgets, visual effects, and themes implemented using HTML, CSS, and jQuery. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Button icon option is used to add an icon inside button element. Syntax: $( ".selector" ).button({ icon: "ui-icon-gear" }); CDN Link: First, add jQuery UI scripts needed
1 min read
jQuery UI Button disabled Option
jQuery UI consists of GUI widgets, visual effects, and themes implemented using HTML, CSS, and jQuery. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Button disabled option is used to disable the button element if it set to true. Syntax: $( ".selector" ).button({ disabled: true }); CDN Link: First, add jQuery UI scrip
1 min read
jQuery UI Button classes Option
jQuery UI consists of GUI widgets, visual effects, and themes implemented using HTML, CSS, and jQuery. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Button classes option is used to add some additional classes to the button element. Syntax: $( ".selector" ).button({ classes: { "ui-button": "highlight" } }); CDN Link:
1 min read
jQuery UI Button label Option
jQuery UI consists of GUI widgets, visual effects, and themes implemented using HTML, CSS, and jQuery. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Button label option is used to add the label on the button element. Syntax: $( ".selector" ).button({ label: "custom label" }); CDN Link: First, add jQuery UI scripts ne
1 min read
jQuery UI Button iconPosition Option
jQuery UI consists of GUI widgets, visual effects, and themes implemented using HTML, CSS, and jQuery. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Button iconPosition option is used to add the position of icon inside button element. The valid values are "beginning", "end", "top" and "bottom". Syntax: $( ".selector"
1 min read
jQuery Mobile Button Widget icon Option
jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be using the jQuery Mobile Button Widget icon Option to add the icon inside the button. Syntax: $("selector").button({ icon: "icon_name" }); CDN Link: First, add jQuery Mobile scripts neede
1 min read
jQuery Mobile Button Widget iconshadow Option
jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be using the jQuery Mobile Button Widget iconshadow Option to set the icon shadow in a button. This option is always used with icon option. Syntax: $("selector").button({ iconshadow : boole
1 min read
jQuery Mobile Button Widget theme Option
jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be using the jQuery Mobile Button Widget theme Option to set the theme (button color) of the button. Syntax: $("selector").button({ theme: "b" }); CDN Link: First, add jQuery Mobile scripts
1 min read
jQuery Mobile Button Widget iconpos Option
jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be using jQuery Mobile Button Widget iconpos Option to set the position of icon inside button. This option is always used with icon option. Its possible values are: left, right, top, bottom
1 min read