4 - UI Elements

4.1 - Buttons

The active user selection

.active

No interaction

.disabled

<button class="ui button {$modifiers}">Button</button>

4.2 - Icons

Full list of icons available on the Semantic UI website

<i class="search icon"></i>
<i class="map icon"></i>
<i class="cloud download icon"></i>

4.3 - Loader

Loading
<div class="ui segment active inverted dimmer">
  <div class="ui text loader">Loading</div>
</div>

4.4 - Pager

<div role="navigation" class="ui pagination menu">
  <a class="active item" title="Go to page 1" href="#">1</a>
  <a class="item" title="Go to page 2" href="#">2</a>
  <a class="icon next item" title="Go to next page" href="#">next ›</a>
</div>

4.5 - Tooltips

Button with tooltip
<div class="ui icon button pop-up" data-content="Do Something" data-title="Title">
  Button with tooltip
</div>

4.6 - Modal window (overlay)

<button class="ui button" id="md">Open modal</button>
<div class="ui modal">
<i class="close icon"></i>
  <div class="header">Header</div>
  <div class="content">
		<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
		<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam id dolor id nibh ultricies vehicula ut id elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean eu leo quam.</p>
		<p>Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis.</p>
  </div>
</div>