tylerlee

The button is a little bit out of date, and the html_options are a bit contrived in their usefulness. However, this is how you use it: 

<%= the_button 'Submit', url_options, html_options %>

html_options =  size: specify 'small', if you want the button smaller
                type: specify 'primary' if the button is the primary action on a page
                icon: specify the name of an icon from the icon font
                popup: 'data-popup-value'
                
The submit button is just a simplified version of the_button for submitting forms. 

tylerlee

# Basic Button
<%= the_button 'A Basic Button' %>

# Button + Icon
<%= the_button 'A File Icon', '', icon: 'file' %>

# Primary Button
# Used to represent the main action on a webpage
<%= the_button 'Primary Action', '', type: 'primary' %>

tylerlee

# Pass the size: 'tiny' to make a smaller button
<%= the_button 'Stanard Button', '' %>

# Pass the size: 'tiny' to make a smaller button
<%= the_button 'Tiny Button', '', :size => 'tiny' %>

# The large button is used in special places like Forms
<%= the_button 'Large', '', :class => 'large' %>

# Rounded edges on a button

tylerlee

<ul class="joined-buttons">
  <li class="left-side"><%= the_button 'First Button', '' %></li>
  <li><%= the_button 'Middle Button', '' %></li>
  <li><%= the_button 'Last Button', '' %></li>
</ul>

tylerlee

<div class="button-row">
  <%= the_button 'Button One', '' %>
  <%= the_button 'Button Two', '' %>
</div>

tylerlee

<%= list_table_for @team_members do |list| %>
  <% list.empty 'There are no people to show at this time' %>
  
  <% list.row do |team_member| %>
    <td class="list-item">
      <%= profile_picture(team_member) %>
      <div class="list-item-title with-pic">
        <h5><%= team_member.display_name %></h5>
        <div class="details"><%= (team_member.city + ', ' if team_member.city) + team_member.state %></div>
      </div>

tylerlee

<%= list_table_for @team_members do |list| %>
  <% list.empty 'There are no people to show at this time' %>

  <% list.header do %>
    <th>User</th>
    <th>Email Address</th>
    <th>God Name</th>
  <% end %>
  
  <% list.row do |team_member| %>

tylerlee

<%= list_table_for @team_members, :form_action => 'search' do |list| %>
  <% list.empty 'There are no people to show at this time' %>
  <% list.search 'Search for a Person', width: '300px' %>
  <%#  list.sort [
       sort_button('Name',  @sortable),
       sort_button('ID', @sortable),
       sort_button('Status',  @sortable)
  ] %>
  
  <% list.row do |team_member| %>

tylerlee

<%= list_table_for @team_members, :form_action => 'search' do |list| %>
  <% list.empty 'There are no people to show at this time' %>
  <% list.search 'Search for a Person', width: '300px' %>
  <%#  list.sort [
       sort_button('Name',  @sortable),
       sort_button('ID', @sortable),
       sort_button('Status',  @sortable)
  ] %>
  <% list.header do %>
    <th class="mass-checkbox">

tylerlee

<%= list_table_for @team_members, :form_action => 'search' do |list| %>
  <% list.empty 'There are no people to show at this time' %>
  <% list.search 'Search for a Person', width: '300px' %>
  
  <% list.row do |team_member| %>
    <td class="mass-checkbox"></td>
    <td class="list-item">
      <%= profile_picture(team_member) %>
      <%= highlight_status({status: 'success', text: 'Approved'}, :class => 'right') %>
      <div class="list-item-title with-pic">