<button type="button">Default</button>
<button type="button" disabled>Disabled</button>
<a class="ui-text-button" href="http://arxitics.com/">Hyperlink</a>

<button class="ui-button-primary" type="button">Primary</button>
<button class="ui-button-success" type="button">Success</button>
<button class="ui-button-info" type="button">Info</button>
<button class="ui-button-warning" type="button">Warning</button>
<button class="ui-button-danger" type="button">Danger</button>

<div class="ui-button-block">
  <button type="button">Block button</button>
</div>

<button class="ui-button-outline ui-button-primary ui-zoom-huge" type="button">Huge</button>
<button class="ui-button-outline ui-button-success ui-zoom-large" type="button">Large</button>
<button class="ui-button-outline ui-button-info ui-zoom-medium" type="button">Medium</button>
<button class="ui-button-outline ui-button-warning ui-zoom-small" type="button">Small</button>
<button class="ui-button-outline ui-button-danger ui-zoom-tiny" type="button">Tiny</button>

<div class="ui-button-group ui-space-trim" data-schema-trim>
  <button title="View chat history">View</button>
  <button title="Clear current chat room">Clear</button>
  <button title="Export chat data as JSON">Export</button>
  <button title="Delete all chat data">Delete</button>
</div>
<div class="ui-button-group ui-space-trim" data-schema-trim>
  <button title="Refresh this page">Refresh</button>
  <button title="Close the connection">Close</button>
</div>

<div class="ui-button-group ui-space-trim" data-schema-trim>
  <input id="published-date" type="radio" name="sort" value="published" checked>
  <label for="published-date">Published Date</label>
  <input class="ui-phone-hidden" id="updated-date" type="radio" name="sort" value="updated">
  <label class="ui-phone-hidden" for="updated-date">Updated Date</label>
  <input class="ui-phone-hidden" id="reader-counts" type="radio" name="sort" value="readers">
  <label class="ui-phone-hidden" for="reader-counts">Reader Counts</label>
  <input id="rating-score" type="radio" name="sort" value="rating">
  <label for="rating-score">Rating Score</label>
</div>
<div class="ui-button-switch ui-offset-medium">
  <input id="sort-order" type="checkbox" name="order" value="ascending">
  <label for="sort-order">
    <span><i data-schema-icon="sort-amount-asc" title="Ascending">Asc</i></span>
    <span><i data-schema-icon="sort-amount-desc" title="Descending">Desc</i></span>
  </label>
</div>

<div class="ui-button-group ui-space-trim" data-schema-trim>
  <input id="physics" type="checkbox" name="groups" value="physics" checked>
  <label for="physics">Physics</label>
  <input id="math" type="checkbox" name="groups" value="math">
  <label for="math">Mathematics</label>
  <input class="ui-phone-hidden" id="cs" type="checkbox" name="groups" value="cs">
  <label class="ui-phone-hidden" for="cs">Computer Science</label>
  <input class="ui-phone-hidden" id="q-bio" type="checkbox" name="groups" value="q-bio">
  <label class="ui-phone-hidden" for="q-bio">Quantitative Biology</label>
  <input class="ui-phone-hidden" id="q-fin" type="checkbox" name="groups" value="q-fin">
  <label class="ui-phone-hidden" for="q-fin">Quantitative Finance</label>
  <input id="stats" type="checkbox" name="groups" value="stats">
  <label for="stats">Statistics</label>
</div>

<form action="http://arxitics.com/search" method="get">
  <input type="search" name="q" placeholder="Search or type a command">
  <button type="submit">Go!</button>
</form>

<form class="ui-form-fluid" action="http://arxitics.com/browse" method="get">
  <label for="categories">Categories</label>
  <input id="categories" type="text" name="categories" placeholder="math-ph, math.MP, cs.CC" required>
  <label for="keywords">Keywords</label>
  <input id="keywords" type="text" name="keywords" placeholder="perturbative gauge theory">
  <label>
    <span class="ui-checkbox-control">
      <input type="checkbox" name="extend" value="true">
      <span class="ui-checkbox-indicator"></span>
    </span>
    Use the extend mode to see more
  </label>
  <div class="ui-skip-large">
    <button type="submit" class="ui-button-primary">Submit</button>
    <button type="reset" class="ui-offset-medium">Reset</button>
  </div>
</form>

<form class="ui-form-horizontal" action="http://arxitics.com/search" method="get">
  <div class="ui-container-grid">
    <label for="title" class="ui-grid-20">Title</label>
    <div class="ui-grid-80">
      <input id="title" type="text" name="title" placeholder="Bayesian probabilistic matrix factorization">
    </div>
    <label for="comments" class="ui-grid-20">Comments</label>
    <div class="ui-grid-80">
      <input id="comments" type="text" name="comments" placeholder="Les Houches summer school">
    </div>
    <label for="sort" class="ui-grid-20">Sort by</label>
    <div class="ui-grid-80 ui-skip-tiny">
      <span class="ui-radio-control">
        <input id="sort" type="radio" name="sort" value="published" checked>
        <span class="ui-radio-indicator"></span>
      </span>
      Published date
    </div>
  </div>
  <div class="ui-text-center ui-skip-large">
    <button class="ui-button-primary" type="submit">Submit</button>
    <button class="ui-offset-medium" type="reset">Reset</button>
  </div>
</form>

<div class="ui-input-addon">
  <label for="email" title="Email"><i data-schema-icon="envelope-o">Email</i></label>
  <input id="email" type="email" name="email">
</div>
<div class="ui-input-addon">
  <select name="browser">
    <option value="chrome">Google Chrome</option>
    <option value="edge">Microsoft Edge</option>
    <option value="firefox">Mozilla Firefox</option>
    <option value="ie">Internet Explorer</option>
    <option value="opera">Opera</option>
    <option value="safari">Safari</option>
  </select>
  <button class="ui-button-primary">Go!</button>
</div>