PCCW Global

  1. Home
  2. Buttons

Buttons

Buttons are used to trigger actions in forms and various components like dropdowns, tabs, modal dialogs and more.

Button styles

Any anchor or button tag can have a unique visual identity by applying the class btn that resets both tags to look identical, and combining with a button style class. Every button style is accompanied by its unique hover, focus and active class states. In this framework, buttons styles are defined and used based on the use case and importance of the action.

  • Main buttons are used for primary actions, like form submits, create new item triggers, confirm actions.
  • Secondary buttons are used for less significant actions like pagination elements so that they don't draw unecessary attention.
  • Underlined buttons are used in tabbed content. An active class signifies the currently active tab.
  • Simple buttons are link replacements in use cases where more active trigger space is required.
  • Faded buttons are used in canceling trigger actions, like resetting a form or canceling an action through a modal dialog.
Code output
HTML Markup
Copy<button class="btn btn-main">Main button</button>
<button class="btn btn-sec">Secondary button</button>
<button class="btn btn-underlined">Underlined button</button>
<button class="btn btn-simple">Simple button</button>
<button class="btn btn-faded">Faded button</button>
It is good practice to use <a> tags for navigation links whenever possible and <button> tags for in-page functionalities. However, since <a> tags are more versatile, they can also be used to trigger in-page functionality if needed.

Button sizes

Button size can be adjusted by applying a class btn-'size-affix' where 'size affix' can be either lg, sm or xs. The class names are semantic and are irrelevant to the responsive resolution tiers.

Code output
HTML Markup
Copy<button class="btn btn-main btn-lg">Large main button</button>
<button class="btn btn-main">Normal main button</button>
<button class="btn btn-main btn-sm">Small main button</button>
<button class="btn btn-main btn-xs">Extra small main button</button>

Button display

Buttons are mostly displayed as inline-blocks but they can also be displayed as blocks.

Button Blocks

Button blocks can be created by applying the btn-block class on button to occupy the full parent container width.

Code output
HTML Markup
Copy<button class="btn btn-main btn-block">Main block button</button>
<button class="btn btn-sec btn-block">Secondary block button</button>

Responsive button block styling

Responsive button block classes can be used to change button styling depending on the applied resolution tier affix.

The responsive button block classes are defined as btn-{affix}-block where {affix} is one of the 5 responsive tier affixes (xxs, xs, sm, md, lg). The responsive button block classes are set only for the specified resolution tier and override any previously set button display properties.

Responsive button blocks - Example

In the following example, the most often use case of responsive blocks is shown - two inline buttons become stacked for extra extra small screen sizes up to 544px.

Code output
HTML Markup
Copy<button class="btn btn-main btn-xxs-block">Main button</button>
<button class="btn btn-sec btn-xxs-block">Secondary button</button>

Button disabled state

Buttons can look inactive and have their actions supressed by applying the attribute disabled - keep in mind that the disabled state is only valid for <button> and not for <a> tags.

Code output
HTML Markup
Copy<button class="btn btn-main" disabled>Disabled button</button>
© 2024, PCCW Global