Layout
Info buttons can be used beside other elements in a UI, like a Label. Info buttons should always be place directly after the element:
Color / States
Rest
The default or normal appearance when it's not being interacted with.
|
|
Design token |
Value |
|---|---|---|
|
Icon |
NeutralForeground2.BrandRest |
#295CAD |
|
Background |
TransparentBackground.Rest |
#FFFFFF 0% |
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. This temporary interaction includes a color change, providing feedback to the user.
|
|
Design token |
Value |
|---|---|---|
|
Icon |
NeutralForeground2.BrandHover |
#19458B |
|
Background |
TransparentBackground.Hover |
#FFFFFF 0% |
Pressed
The pressed state refers to the visual and interactive changes that occur when a user clicks or taps on it.
|
|
Design token |
Value |
|---|---|---|
|
Icon |
NeutralForeground2.BrandPressed |
#0C3069 |
|
Background |
TransparentBackground.Pressed |
#FFFFFF 0% |
Selected
|
|
Design token |
Value |
|---|---|---|
|
Icon |
NeutralForeground2.BrandSelected |
#041E47 |
|
Background |
TransparentBackground.Selected |
#FFFFFF 0% |
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.
|
|
Design token |
Value |
|---|---|---|
|
Icon |
NeutralForeground2.BrandRest |
#295CAD |
|
Background |
TransparentBackground.Rest |
#FFFFFF 0% |
|
Focus ring stroke |
StrokeFocus1.Rest |
#295CAD |
|
Outside stroke |
StrokeFocus2.Rest |
#FFFFFF |
Size options
Delish has 3 sizes for an info button: small, medium and large. The default size for desktop is medium. For mobile, it’s large.
Specs by size
|
Info button size |
Icon size value |
Fluent Icon |
|---|---|---|
|
Small |
12px |
‘Info’ ; Regular |
|
Medium |
16px |
‘Info’ ; Regular |
|
Large |
20px |
‘Info’ ; Regular |