Component states

Details on how the states look for clickable components

States

Någon inledande text?

Översiktlig bild

 

Hover

Vad är det? Hur beter den sig

  • Background state: Blue

code

Variations
  • Tabs: När man hovrar över en markerad tab händer inget. När man hovrar över en icke markerad tab får den ljusgrå border och ljusare blå text.

 

Focus

(bild visar inte en outline)

Focus is when the user tabs their way to the component. On the focus event, they will have an outline that fades out.

Selected: dark blue 2 

Focus: box-shadow: 0 0 4px 1px rgba(#41B0EE, 1); (seb-blue)

Variations
  • Tabs: The bottom of the tab is not blue, to avoid looking like button.

 

Pressed

Vad är det? Hur beter den sig?

  • Background colour: Blue
Variations
  • Tabs: Under tiden man trycker på fliken kommer den få samma blå som focus på sig (dock lite ljusare), men så fort den är markerad är den inte blå utan grå border. 

 

Disabled

Vad är det? Hur beter den sig?

  • Background colour: Grey 200