Semantic UI is a popular user interface framework that provides a set of pre-defined semantic elements. In this tutorial, we will explore the 'Button' semantic element in Semantic UI, its syntax, example, output, explanation, use, and important points.
The 'Button' element in Semantic UI can be used to display a clickable button on a web page. It can be created using the following syntax:
<button class="ui button">Button text</button>
Let's consider an example of a 'Button' element in Semantic UI. Assume we want to display a button with the text 'Click Me'. We can use the following code.
A button can animate to show hidden content.
<div class="ui animated button" tabindex="0">
<div class="visible content">Next</div>
<div class="hidden content">
<i class="right arrow icon"></i>
</div>
</div>
<div class="ui vertical animated button" tabindex="0">
<div class="hidden content">Shop</div>
<div class="visible content">
<i class="shop icon"></i>
</div>
</div>
<div class="ui animated fade button" tabindex="0">
<div class="visible content">Sign-up for a Pro account</div>
<div class="hidden content">
$12.99 a month
</div>
</div>
A button can appear alongside a label.
<div class="ui labeled button" tabindex="0">
<div class="ui button">
<i class="heart icon"></i> Like
</div>
<a class="ui basic label">
2,048
</a>
</div>
<div class="ui left labeled button" tabindex="0">
<a class="ui basic right pointing label">
2,048
</a>
<div class="ui button">
<i class="heart icon"></i> Like
</div>
</div>
<div class="ui left labeled button" tabindex="0">
<a class="ui basic label">
1,048
</a>
<div class="ui icon button">
<i class="fork icon"></i>
</div>
</div>
<div class="ui labeled button" tabindex="0">
<div class="ui red button">
<i class="heart icon"></i> Like
</div>
<a class="ui basic red left pointing label">
1,048
</a>
</div>
<div class="ui labeled button" tabindex="0">
<div class="ui basic blue button">
<i class="fork icon"></i> Forks
</div>
<a class="ui basic left pointing blue label">
1,048
</a>
</div>
A button can use an icon as a label.
<button class="ui labeled icon button" fdprocessedid="o5ehfc">
<i class="pause icon"></i>
Pause
</button>
<button class="ui right labeled icon button" fdprocessedid="230pmt">
<i class="right arrow icon"></i>
Next
</button>
<button class="ui labeled icon button" fdprocessedid="ja2n1">
<i class="loading spinner icon"></i>
Loading
</button>
A basic button is less pronounced.
<button class="ui red basic button" fdprocessedid="ukwm5f">Red</button>
<button class="ui orange basic button" fdprocessedid="g23abe">Orange</button>
<button class="ui yellow basic button" fdprocessedid="279kt">Yellow</button>
<button class="ui olive basic button" fdprocessedid="9z7iqc">Olive</button>
<button class="ui green basic button" fdprocessedid="jcm7fa">Green</button>
<button class="ui teal basic button" fdprocessedid="5r4o9k">Teal</button>
<button class="ui blue basic button" fdprocessedid="v87aw">Blue</button>
<button class="ui violet basic button" fdprocessedid="tgv22">Violet</button>
<button class="ui purple basic button" fdprocessedid="47d8q9">Purple</button>
<button class="ui pink basic button" fdprocessedid="ia20pp">Pink</button>
<button class="ui brown basic button" fdprocessedid="lkbl6f">Brown</button>
<button class="ui grey basic button" fdprocessedid="k6i8pn">Grey</button>
<button class="ui black basic button" fdprocessedid="vxmc4">Black</button>
A button can be formatted to appear on dark backgrounds.
<div class="ui inverted segment">
<button class="ui inverted button" fdprocessedid="nudstd">Standard</button>
<button class="ui inverted primary button" fdprocessedid="y4vc4n">Primary</button>
<button class="ui inverted secondary button" fdprocessedid="hp0thh">Secondary</button>
<button class="ui inverted red button" fdprocessedid="hwr7qr">Red</button>
<button class="ui inverted orange button" fdprocessedid="umd12">Orange</button>
<button class="ui inverted yellow button" fdprocessedid="ggs7tr">Yellow</button>
<button class="ui inverted olive button" fdprocessedid="whegjs">Olive</button>
<button class="ui inverted green button" fdprocessedid="dqa3o4">Green</button>
<button class="ui inverted teal button" fdprocessedid="85oflj">Teal</button>
<button class="ui inverted blue button" fdprocessedid="00ebio">Blue</button>
<button class="ui inverted violet button" fdprocessedid="ava1qm">Violet</button>
<button class="ui inverted purple button" fdprocessedid="cpvb2">Purple</button>
<button class="ui inverted pink button" fdprocessedid="d89ka9">Pink</button>
<button class="ui inverted brown button" fdprocessedid="0gmexj">Brown</button>
<button class="ui inverted grey button" fdprocessedid="a751t">Grey</button>
<button class="ui inverted black button" fdprocessedid="1noe0m">Black</button>
</div>
<div class="ui inverted segment mt-3">
<button class="ui inverted basic button" fdprocessedid="r6bhs9">Basic</button>
<button class="ui inverted primary basic button" fdprocessedid="zi21ea">Primary</button>
<button class="ui inverted secondary basic button" fdprocessedid="m6hx55">Secondary</button>
<button class="ui inverted red basic button" fdprocessedid="y6sf1">Basic Red</button>
<button class="ui inverted orange basic button" fdprocessedid="ryskb">Basic Orange</button>
<button class="ui inverted yellow basic button" fdprocessedid="0pz3ts">Basic Yellow</button>
<button class="ui inverted olive basic button" fdprocessedid="1q2fp6">Basic Olive</button>
<button class="ui inverted green basic button" fdprocessedid="f122eb">Basic Green</button>
<button class="ui inverted teal basic button" fdprocessedid="cpeux">Basic Teal</button>
<button class="ui inverted blue basic button" fdprocessedid="ogis3">Basic Blue</button>
<button class="ui inverted violet basic button" fdprocessedid="a2yltp">Basic Violet</button>
<button class="ui inverted purple basic button" fdprocessedid="13w17">Basic Purple</button>
<button class="ui inverted pink basic button" fdprocessedid="v8ggdd">Basic Pink</button>
<button class="ui inverted brown basic button" fdprocessedid="e56a">Basic Brown</button>
<button class="ui inverted grey basic button" fdprocessedid="a48yde">Basic Grey</button>
<button class="ui inverted black basic button" fdprocessedid="wfabj">Basic Black</button>
</div>
Buttons can exist together as a group.
<div class="ui buttons">
<button class="ui button" fdprocessedid="9dasll">One</button>
<button class="ui button" fdprocessedid="q091nt">Two</button>
<button class="ui button" fdprocessedid="er47re">Three</button>
</div>
Button groups can contain conditionals.
<div class="ui buttons">
<button class="ui button" fdprocessedid="azsntl">Cancel</button>
<div class="or"></div>
<button class="ui positive button" fdprocessedid="b92do">Save</button>
</div>
A button can be formatted to link to a social website.
<button class="ui facebook button" fdprocessedid="xpbvme">
<i class="facebook icon"></i>
Facebook
</button>
<button class="ui twitter button" fdprocessedid="jjy46p">
<i class="twitter icon"></i>
Twitter
</button>
<button class="ui google plus button" fdprocessedid="eh5h3n">
<i class="google plus icon"></i>
Google Plus
</button>
<button class="ui vk button" fdprocessedid="om2ub">
<i class="vk icon"></i>
VK
</button>
<button class="ui linkedin button" fdprocessedid="e1q4l2">
<i class="linkedin icon"></i>
LinkedIn
</button>
<button class="ui instagram button" fdprocessedid="c2dktd">
<i class="instagram icon"></i>
Instagram
</button>
<button class="ui youtube button" fdprocessedid="4vxia7">
<i class="youtube icon"></i>
YouTube
</button>
A button can have different sizes.
<button class="mini ui button" fdprocessedid="0lv70s">
Mini
</button>
<button class="tiny ui button" fdprocessedid="bkohbv">
Tiny
</button>
<button class="small ui button" fdprocessedid="ixq935">
Small
</button>
<button class="medium ui button" fdprocessedid="0zvqv">
Medium
</button>
<button class="large ui button" fdprocessedid="dc94h4">
Large
</button>
<button class="big ui button" fdprocessedid="b9z4ri">
Big
</button>
<button class="huge ui button" fdprocessedid="rh6f8q">
Huge
</button>
<button class="massive ui button" fdprocessedid="fq82x9">
Massive
</button>
A button can have different colors.
<button class="ui red button" fdprocessedid="1iqtbp">Red</button>
<button class="ui orange button" fdprocessedid="4ku5nn">Orange</button>
<button class="ui yellow button" fdprocessedid="a6wfy">Yellow</button>
<button class="ui olive button" fdprocessedid="d38a5b">Olive</button>
<button class="ui green button" fdprocessedid="6gt53t">Green</button>
<button class="ui teal button" fdprocessedid="atb955">Teal</button>
<button class="ui blue button" fdprocessedid="hhg8og">Blue</button>
<button class="ui violet button" fdprocessedid="igb267">Violet</button>
<button class="ui purple button" fdprocessedid="qh8fz9">Purple</button>
<button class="ui pink button" fdprocessedid="7kesvi">Pink</button>
<button class="ui brown button" fdprocessedid="b4ea8">Brown</button>
<button class="ui grey button" fdprocessedid="gjk4nb">Grey</button>
<button class="ui black button" fdprocessedid="sldn68">Black</button>
A button can be circular.
<button class="ui circular facebook icon button" fdprocessedid="hilclc">
<i class="facebook icon"></i>
</button>
<button class="ui circular twitter icon button" fdprocessedid="9fayg8">
<i class="twitter icon"></i>
</button>
<button class="ui circular linkedin icon button" fdprocessedid="heufr">
<i class="linkedin icon"></i>
</button>
<button class="ui circular google plus icon button" fdprocessedid="z0i4o">
<i class="google plus icon"></i>
</button>
A button can be attached to the top or bottom of other content.
<div class="ui top attached button" tabindex="0">Top</div>
<div class="ui attached segment">
<p></p>
</div>
<div class="ui bottom attached button" tabindex="0">Bottom</div>
Groups can be formatted to appear vertically.
<div class="ui vertical buttons">
<button class="ui button" fdprocessedid="j7tbsq">Feed</button>
<button class="ui button" fdprocessedid="zpl5vq">Messages</button>
<button class="ui button" fdprocessedid="bja7x4d">Events</button>
<button class="ui button" fdprocessedid="zeou4d">Photos</button>
</div>
Groups can be formatted as labeled icons.
<div class="ui vertical labeled icon buttons">
<button class="ui button" fdprocessedid="i99o0p">
<i class="pause icon"></i>
Pause
</button>
<button class="ui button" fdprocessedid="2r8xkk">
<i class="play icon"></i>
Play
</button>
<button class="ui button" fdprocessedid="avgy7g">
<i class="shuffle icon"></i>
Shuffle
</button>
</div>
Groups can be formatted to use multiple button types together.
<div class="ui buttons">
<button class="ui labeled icon button" fdprocessedid="1bd4wn">
<i class="left chevron icon"></i>
Back
</button>
<button class="ui button" fdprocessedid="x1pqa">
<i class="stop icon"></i>
Stop
</button>
<button class="ui right labeled icon button" fdprocessedid="q66om">
Forward
<i class="right chevron icon"></i>
</button>
</div>
The 'Button' element in Semantic UI provides a pre-defined style for creating clickable buttons on the web page. It includes various pre-defined classes that can be used to modify the appearance of the button. Some of the commonly used classes are:
ui button: This class defines a basic button with a default color scheme.primary: This class defines a primary button with a blue color scheme.secondary: This class defines a secondary button with a grey color scheme.icon: This class defines an icon button with only an icon and no text.The 'Button' element in Semantic UI can be used to create clickable buttons on the web page. It is useful when we want to provide an action or call-to-action for the user. The pre-defined classes provided by Semantic UI make it easy to create buttons with various styles and color schemes.
ui button, primary, secondary, and icon.In this tutorial, we explored the 'Button' semantic element in Semantic UI, its syntax, example, output, explanation, use, and important points. The 'Button' element can be used to create clickable buttons on the web page, and the pre-defined classes provided by Semantic UI make it easy to modify the appearance of the button.