Spin button

Styles

Spin buttons have the same style options as an Input: outline and filled. Outline is the default.

 

 

Color / States

Rest

The default or normal appearance when it's not being interacted with.

 

Hover

The hover state refers to the visual and interactive changes that occurs when a user moves their cursor over the button but doesn't click it. The interaction is very temporary and in our case, includes a color change to provide feedback to the user.

 

Pressed

The pressed state refers to the visual and interactive changes that occur when a user clicks or taps on it.

 

Disabled

When the component is temporarily inactive or unresponsive to user interaction. In this state, the container and label appears grayed out to visually indicate that it cannot be clicked or triggered. Both styles have the same color specs.

 

Focus

The focus state occurs when it is highlighted, indicating that it is currently selected or in focus. This state is often triggered when a user tabs through interactive elements on a webpage or app, providing a visual cue that it's ready to be activated or clicked. It helps users navigate and interact with the interface, especially for those who rely on keyboard navigation or assistive technologies.

 

Error

The error state normally appears when the user forgot to input their information or the wrong type of information was entered. When a spin button becomes a field, the error state should come with error text to let the user know the problem.

Read only

This is a state where the user needs to see what was entered, but not able to interact with it. Disabled states are not read by screen readers, which make them inaccessible if they need to be interpreted. Both styles have the same color specs.

 

 

Size options

Delish has 3 sizes options for a spin button: small, medium and large. Medium is the default size for desktop and large is the default for mobile.

 

 

Specs by size