States

Enabled

Enabled is the default state, where input results in an action.

Hover

Hover is when you have the mouse over an element.

Focused

Focused is when you tab or cursor keys to move between the elements.

Pressed

Pressed is when you click but do not yet release the mouse button or key.

Visited

Visited is when you have previously clicked on a link.

Selected

Selected is when you select an option.

Error

Error is when you type an invalid input.

Disabled

Disabled is when you cannot interact with an inactive element.

Read-only (White)

Read-only (Grey)

Read-only (Transparent)

Read-only is when you can view information but not type or edit the text value.

It's useful when you want to restrict the user from making any changes to the data, while still allowing them to access the information.

1. Use white on grey card and panel

2. Use grey on white card and panel

3. Use transparent on any card and panel