Buttons

Two different varieties of button are available in the design system.

Primary button

Use sparingly, ideally only once per page.
Ideal for important actions like form submission.
For H5P content, all buttons use this style due to limitations.

<button class="btn btn-primary" >Primary button</button>

Default state

Follows Bootstrap's btn-outline-secondary style.
Use for most buttons on a page.

<button class="btn btn-default">Button label</button>

Secondary Button

Best for less prominent actions.
Uses interface-grey for the border.
Rollovers match the default state.
Sized to match height of other buttons. Override height to create more compact buttons

<button class="btn btn-secondary">Button label</button>

Icon Button

An extension of small button with an icon added.
Currently, print and embed buttons are available in the system.
Additional icons will be added as needed.

<button class="btn btn-print">Print</button>
<button class="btn btn-embed">Embed</button>

Creating a New Icon Button

Design Icons:

Create in software like Adobe Illustrator.
Use a 32x32 box, with content in a 20x20 area.

Export and Minify:

Export the icon as SVG.
Minify using a tool like svgminify.com.

Convert for CSS:

Convert special characters: <, >, # to their ascii equivalents : %3C, %3E and %23.
Replace any double quotes with single quotes
Paste the SVG code into the CSS.
Remember to provide a dark mode version of the code, converting any fills and strokes from #e61f2a to #E6636A
Use the convertor below to generate the code

.btn-embed::before {
    content: url("data:image/svg+xml, svg code here");
}
// Dark mode
@include color-mode(dark) {
    .btn-embed::before {
        content: url("data:image/svg+xml, svg code with fills and strokes replaced");
    }
}

Other

The prev and next links at the bottom of the page need to be visually prominent. While they take some styling cues from buttons to achieve this, they are in fact links. Visit the links page for more information.

SVG Code Converter

Enter the short name for your button and paste your SVG code below:

Design system homepage