ProDemos Design System

Buttons

List of all kind of buttons used throughout the project. Every button starts with a class (pds-c-button) that contains the shared behaviour. There are modifiers to describe the primary or secondary style, and the themes, when used, primarily consists of colors for the default, hover, and focus states. If you want a button to be present but not yet clickable, just add the disabled modifier class provided in the example. The buttons with an icon contain an extra container with the SVG-code. Just choose a button that fits best to your situation, copy the code and alter to your needs.

Buttons use themes for their different colors. If you want a different colored button, try a different theme on the button.

Elements and modifiers

  • .pds-c-button[ .primary | .secondary ]
  • .pds-c-button[ .large | .regular |.small ]
  • .pds-c-button[ .full-width ]
  • .pds-c-button[ .accent | .disabled ]
  • .pds-c-button[ .toggle[.on|.off] | .transparent ]
  • .pds-c-button > pds-c.button-label
  • .pds-c-button > .pds-c-button-content[.big] > [ i.pds-c-button-icon .{name} + ] .pds-c-button-label [ .left | .right ] [ + i.pds-c-button-icon .{name} ]
  • .pds-c-button > .pds-c-button-content[.big] > [ svg.pds-c-button-icon + ] .pds-c-button-label [ .left | .right ] [ + svg.pds-c-button-icon ]
Button

Text button, large (=default)

Large is the default style of a button if no other properties are given

<a class="pds-c-button primary large " data-component="button" href="#">
  <span class="pds-c-button-label">Button</span>
</a>
Button

Text button, large, accent

Accent is always the opposite color of the theme

<a class="pds-c-button primary large accent " data-component="button" href="#">
  <span class="pds-c-button-label">Button</span>
</a>
Button

Text button, large, disabled

A class can be added to disable the button

<a class="pds-c-button primary large disabled " data-component="button" href="#">
  <span class="pds-c-button-label">Button</span>
</a>
Button

Text button, large, regular icon

Icon in front of the text

<a class="pds-c-button primary large " data-component="button" href="#">
  <span class="pds-c-button-content">
    <i class="pds-c-button-icon arrow-circled-left "></i>
    <span class="pds-c-button-label right"> Button </span>
  </span>
</a>
Button

Text button, large, svg icon

Icon behind the text

<a class="pds-c-button primary large " data-component="button" href="#">
  <span class="pds-c-button-content">
    <span class="pds-c-button-label left"> Button </span>
    <!-- replace the SVG-code with the appropriate from the folder 'images/icons' -->
    <svg width="22px" height="22px" aria-hidden="true" role="img" class="pds-c-button-icon right icon--arrow-right-circle-solid">
      <use href="../../../assets/images/icons/arrow-right-circle-solid.svg#root"></use>
    </svg>
  </span>
</a>
Button

Text button, large, with icons

Icon both in front of and behind the text

<a class="pds-c-button primary large " data-component="button" href="#">
  <span class="pds-c-button-content">
    <i class="pds-c-button-icon arrow-circled-left "></i>
    <span class="pds-c-button-label right"> Button </span>
    <i class="pds-c-button-icon arrow-circled-right "></i>
  </span>
</a>
Submit

Text button, regular, with 3D-effect

<a class="pds-c-button primary regular " data-component="button" href="#">
  <span class="pds-c-button-label">Submit</span>
</a>
Submit

Text button, regular

<a class="pds-c-button secondary regular " data-component="button" href="#">
  <span class="pds-c-button-label">Submit</span>
</a>
Button

Text button, regular, with icon

Icon in front of the text

<a class="pds-c-button primary regular " data-component="button" href="#">
  <span class="pds-c-button-content">
    <i class="pds-c-button-icon arrow-circled-left "></i>
    <span class="pds-c-button-label right"> Button </span>
  </span>
</a>
Submit

Text button, small.

Note; a small button can't have the 3D-effect of the 'primary', so it defaults to 'secondary' when given this property

<a class="pds-c-button secondary small " data-component="button" href="#">
  <span class="pds-c-button-label">Submit</span>
</a>
Button

Text button, small, with icon

Icon in front of the text

<a class="pds-c-button small " data-component="button" href="#">
  <span class="pds-c-button-content">
    <i class="pds-c-button-icon arrow-circled-left "></i>
    <span class="pds-c-button-label right"> Button </span>
  </span>
</a>
Submit

Text button, small, disabled

<a class="pds-c-button secondary small disabled " data-component="button" href="#">
  <span class="pds-c-button-label">Submit</span>
</a>
Toggle

Toggle button

<a class="pds-c-button toggle " data-component="button" href="#">
  <span class="pds-c-button-label">Toggle</span>
</a>
Toggle

Toggle button, disabled

<a class="pds-c-button toggle disabled " data-component="button" href="#">
  <span class="pds-c-button-label">Toggle</span>
</a>
Button

Link button

<a class="pds-c-button transparent " data-component="button" href="#">
  <span class="pds-c-button-label">Button</span>
</a>
Button

Link button

<a class="pds-c-button transparent " data-component="button" href="#">
  <span class="pds-c-button-content">
    <i class="pds-c-button-icon arrow-right "></i>
    <span class="pds-c-button-label right"> Button </span>
  </span>
</a>