Skip to content

2.7-beta-1: Button Presets / Button Element #1299

@DigitalServicesLab

Description

@DigitalServicesLab

2 bugs + 1 missing feature + 1 legacy hangover

Size Bug 1

When setting the 'size' option on Button Global Presets, you can set an 'override width' and also a 'full width at' option which are very useful in keeping all buttons the same size and making them look good on mobile.

Image

However, this setting has a bug.
When set at the Global Preset level, it works for elements that have buttons in them such as image boxes, but it does not work for the Button Element itself even though this is the child element that is nested within other elements.
When you set these two settings on a Button Element via Styles > Custom > Custom > Size it does work for the Button Element even though it is the exact same setting used in Presets...

Examples below.

Button using Presets
Image

Button using Custom
Image

Size Bug 2

If you create a Preset and set 'full width at' to anything other other Desktop it doesn't work - at least not in Image Boxes.

Image

Missing Feature

The above mentioned 'override width' and 'full width at' options do not exist for Primary and Secondary buttons, but they should.
The impact is that the only way to make buttons fullwidth where they are nested inside other elements like image boxes, is by using a Preset style, and not Primary or Secondary. In some cases this means making a Preset that is exactly the same as Primary and Secondary just so you can size them properly.

Global Settings > Buttons : legacy hangover

Currently we have Primary, Secondary and Presets - There are three because presets were launched with v2 and prior to that there was only Primary and Secondary (which are in fact just a limited set of presets).
But with the advent of Presets, Primary and Secondary become redundant. There is no need for 3 separate options here.
Not specifically an issue but cleaning up legacy code like this pays dividends down the road. The Button global styles/presets could be streamlined and optimised.
The impact is the whenever you need to style a button you have more choices than required.

This could just be Custom, Preset, Text (although text is questionable because you can just style it like that with either custom or preset)
Image

I think the Button options should match the way Typography options work.

Image

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions