Button Deprecated

Open in Storybook

While you can combine all styles/colours/sizes using the classes below, not all combinations are allowed in any given context. See the Buttons examples for all valid style/colour/size combinations.

Basic buttons

George builds upon the Bootstrap buttons. Bootstrap’s .btn and .btn-* combined with George’s .g-btn-* classes work on <button>, <input> as well as on <a> elements.

Button markup

Although there are three buttons depicted above, the use of <input type="button"> is deprecated and <button> should be used instead. This means only <a> and <button> remain, but independent of the actual markup, you’ll get the same visual result.

If it goes somewhere, use a link. If it does something, use a button. In other words, links need a meaningful URL to go to, which may be a remote destination, but also somewhere else on the same page (i.e. an anchor). Make sure to get it right, as the two have their distinct behaviour. To give you an example: Buttons are triggered by pressing Space, anchor links with Enter.

Button shapes

George uses filled, outlined, and borderless button shapes. The shape is predetermined and depends on the type of button you use. E.g., the so-called PrimaryButton will always be filled. See colours for more details.

Button sizes

George uses three button sizes:

Button colours

The colour of buttons is defined by assigning it a .g-btn-* subclass:

Disabled buttons

Every button can be disabled by adding a disabled attribute:

Button icons

To add an icon to a button, give it either the .g-btn-icon or .g-btn-icon-only class so it will adjust the paddings to fit the icon, and add the icon’s <svg> to its content.

HINT If buttons only contain an icon but no text, use .g-btn-icon-only and add a localized label for screen readers via aria-label="[I18N]".

This will also work with buttons that feature icons and text. It will left-align the button’s label automatically, too.

HINT If buttons feature both an icon and text, use .g-btn-icon and hide the icon from screen readers via aria-hidden="true".

Button spacing

Maintaining consistent spacing between buttons and/or other preceding/succeeding elements is tricky - especially in responsive scenarios where buttons shift around multiple lines. To solve this:

• Always put buttons in .g-group.g-group-button containers,
• make sure there is no whitespace between closing and opening braces of two buttons.

Feel free to mix <button>- and/or <a>-style buttons. If you need alignment, use Bootstrap’s .text-left/.text-center/.text-right on the container.

HINT Don’t put other HTML elements in a .g-group-button container - they are designed to work with buttons only.

HINT For details on .g-group see Typography.