Button documentation: Alignment of component names with frontend
Currently, we have primary buttons, secondary buttons, and a tertiary button (default/gray).
Bootstrap uses a series of filled buttons that match our styles of buttons.
They call their filled gray button their secondary button. We do not have a filled gray button and our secondary buttons are what they call their outline buttons.
https://getbootstrap.com/docs/4.0/components/buttons/
Our naming should be in alignment with frontend. How can we achieve that together while keeping a clearly defined hierarchy?
Mapping from ~"pattern library" to bootstrap4 should be easy eventually. Current mapping draft attached via the following tables.
Bootstrap 4: Default | GitLab Design System |
---|---|
btn-primary : Theme-colored CtA button |
Primary : First button hierarchy, filled, independent of fill color |
btn-secondary : Grayscale-colored CtA button |
Secondary : Second button hierarchy, outline, independent of outline color |
btn-success |
to define |
btn-danger |
to define |
btn-warning |
to define |
btn-info |
to define |
btn-light |
to define |
btn-dark |
to define |
Bootstrap 4: Outline | GitLab Design System |
---|---|
btn-outline-primary |
to define |
btn-outline-secondary |
to define |
btn-outline-success |
to define |
btn-outline-danger |
to define |
btn-outline-warning |
to define |
btn-outline-info |
to define |
btn-outline-light |
to define |
btn-outline-dark |
to define |
Bootstrap 4: States | GitLab Design System |
---|---|
active |
to define |
disabled |
to define |
to add | to define |
Edited by Andreas Kämmerle