Buttons
Buttons ermöglichen Interaktion. Aktionen sind vorrangig funktional und finden im Kontext der Seite statt. Buttons können auch als Navigationselemente verwendet werden, um Verlinkungen besonders hervorzuheben. Es existieren primäre (Primary) und sekundäre (Secondary) Buttons.
Primary Button
Dies ist der plakativste Button. Er kennzeichnet die wichtigste Aktion und entspricht der ersten Hierarchieebene. In einem funktionalen Zusammenhang wird maximal ein Primary Button eingesetzt.
Er hat eine Höhe von 50px und ist in der Breite flexibel. Als Font wird die EDEKA Text in 14px benutzt.
Primary Button auf hellem Hintergrund (Weiß, Grau, Gelb)
Primary Button auf dunklem Hintergrund
Secondary Button
Der Secondary Button kennzeichnet nachrangige oder ergänzende Aktionen der zweiten Hierarchieebene. Außerdem kann er eingesetzt werden, wenn der Button im Layout nicht so stark hervorgehoben sein soll. Secondary Buttons können kombiniert werden und/oder neben einem Primary Button stehen.
Als Font wird die EDEKA Head in 14px benutzt. Der gelbe Unterstrich wird ist 2px hoch in einem Abstand XS (10px) unter der Typo. In der Breite ist der Button flexibel.
Secondary Button auf hellem Hintergrund
