Soracom

Home Design System Containers Controls

Controls

A control is a generic container that contains a set of page controls such as buttons and selects.

stable dark-mode

Overview

ds-controls is a control bar component, typically used above a ds-datatable to group sets of ds-button-bars.

Options

Basic usage

At at simplest, ds-controls expects a single div which contains the required button.

<section class="ds-controls">
  <div>
    <button class="ds-button"><span>Button</span></button>  
  </div>
</section>

XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px

<section class="ds-controls">
  <div>
    <button class="ds-button"><span>Button</span></button>  
  </div>
</section>

Multiple ds-controls will automatically include a dotted rule to separate the items visually.

<section class="ds-controls">
  <div>
    <button class="ds-button"><span>Button</span></button>  
  </div>
</section>
<section class="ds-controls">
  <div>
    <button class="ds-button"><span>Button</span></button>  
  </div>
</section>

XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px

<section class="ds-controls">
  <div>
    <button class="ds-button"><span>Button</span></button>  
  </div>
</section>
<section class="ds-controls">
  <div>
    <button class="ds-button"><span>Button</span></button>  
  </div>
</section>

If ds-controls contains more than one child element - they are spaced apart:

Multiple child elements

<section class="ds-controls">
  <div>
    <button class="ds-button"><span>Button</span></button>  
  </div>
  <div>
    <button class="ds-button"><span>Button</span></button>  
  </div>
</section>

XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px

<section class="ds-controls">
  <div>
    <button class="ds-button"><span>Button</span></button>  
  </div>
  <div>
    <button class="ds-button"><span>Button</span></button>  
  </div>
</section>

ds-button-bar can be used as child element to have groups of controls:

Example using div container

<section class="ds-controls">
  <div class="ds-button-bar">
    <button class="ds-button"><span>Button</span></button>
    <button class="ds-button"><span>Button</span></button>
  </div>
  <div class="ds-button-bar">
    <p>Text content</p>
    <button class="ds-button"><span>Button</span></button>
    <button class="ds-button"><span>Button</span></button>
  </div>
</section>

XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px

<section class="ds-controls">
  <div class="ds-button-bar">
    <button class="ds-button"><span>Button</span></button>
    <button class="ds-button"><span>Button</span></button>
  </div>
  <div class="ds-button-bar">
    <p>Text content</p>
    <button class="ds-button"><span>Button</span></button>
    <button class="ds-button"><span>Button</span></button>
  </div>
</section>

Examples

Above ds-datatables the following contents/order is recommended.

Recommended ds-datatable controls

<section class="ds-controls">
  <div>
    <button class="ds-button"><span>Button</span></button>  
  </div>
</section>
<section class="ds-controls">
  <div class="ds-button-bar">
    <button class="ds-button"><span>Button</span></button>
    <button class="ds-button"><span>Button</span></button>
  </div>
  <div class="ds-button-bar">
    <p>Showing 1 to 10</p>
    <select class="ds-select">
      <option value="10">10</option>
      <option value="50">50</option>
      <option value="100">100</option>
    </select>
    <button type="button" class="ds-button --plain --hide-label --icon-arrow-left" disabled="true">
      <span>Previous</span>
    </button>
    <button type="button" class="ds-button --plain --hide-label --icon-arrow-right">
      <span>Next</span>
    </button>
    <button type="button" class="ds-button --plain --hide-label --icon-rotate-cw">
      <span>Reload</span>
    </button>
    <button type="button" class="ds-button --plain --icon-settings --hide-label">
      <span>Table Settings</span>
    </button>
  </div>
</section>

XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px

<section class="ds-controls">
  <div>
    <button class="ds-button"><span>Button</span></button>  
  </div>
</section>
<section class="ds-controls">
  <div class="ds-button-bar">
    <button class="ds-button"><span>Button</span></button>
    <button class="ds-button"><span>Button</span></button>
  </div>
  <div class="ds-button-bar">
    <p>Showing 1 to 10</p>
    <select class="ds-select">
      <option value="10">10</option>
      <option value="50">50</option>
      <option value="100">100</option>
    </select>
    <button type="button" class="ds-button --plain --hide-label --icon-arrow-left" disabled="true">
      <span>Previous</span>
    </button>
    <button type="button" class="ds-button --plain --hide-label --icon-arrow-right">
      <span>Next</span>
    </button>
    <button type="button" class="ds-button --plain --hide-label --icon-rotate-cw">
      <span>Reload</span>
    </button>
    <button type="button" class="ds-button --plain --icon-settings --hide-label">
      <span>Table Settings</span>
    </button>
  </div>
</section>