Semantic-UI Button Disabled States
Last Updated :
10 Mar, 2022
Semantic UI is a modern framework used in developing seamless designs for the website, It gives the user a lightweight experience with its components. It uses predefined CSS and jQuery to incorporate different frameworks.
Semantic-UI Button Disabled States are is one of the states from 3 states of Semantic-UI Button States. This class is used to set the button status active.
Semantic-UI Button Disabled States Class:
- disabled: This class is used to set the button status disabled.
Syntax:
<button class="ui disabled button">
...
</button>
Below example illustrate the Semantic-UI Button Disabled States:
Example:
HTML
<!DOCTYPE html>
< html >
< head >
< link href =
rel = "stylesheet" />
< style >
button {
width: 150px;
}
.container {
margin-left: 10%;
}
</ style >
</ head >
< body >
< center >
< h1 class = "ui green" >
Geeksforgeeks
</ h1 >
< strong >
Semantic-UI Button Disabled States
</ strong >
</ center >
< br >< br >
< div class = "container" >
< strong >Button Disabled States:</ strong >
< button class = "ui disabled button" >
< i class = "like icon" ></ i >
Like
</ button >
< button class = "ui disabled button" >
< i class = "share icon" ></ i >
share
</ button >
< button class = "ui disabled button" >
< i class = "trash icon" ></ i >
trash
</ button >
</ div >
</ body >
</ html >
|
Output:
Semantic-UI Button Disabled States
Example 2:
HTML
<!DOCTYPE html>
< html >
< head >
< title >Semantic UI</ title >
< link href =
rel = "stylesheet" />
< style >
button {
width: 150px;
}
.container {
margin-left: 10%;
}
</ style >
</ head >
< body >
< center >
< h1 class = "ui green" >Geeksforgeeks</ h1 >
< strong >Semantic-UI Button Disabled States</ strong >
</ center >
< br >< br >
< div class = "container" >
< strong >Basic Button Disabled States:</ strong >
< button class = "ui disabled basic button" >
< i class = "like icon" ></ i >
Like
</ button >
< button class = "ui disabled basic button" >
< i class = "share icon" ></ i >
share
</ button >
< button class = "ui disabled basic button" >
< i class = "trash icon" ></ i >
trash
</ button >
</ div >
</ body >
</ html >
|
Output:
Semantic-UI Button Disabled States
Reference: https://semantic-ui.com/elements/button.html#disabled
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...