Buttons, input and labels

Buttons and input are the bread and butter of your interactions. The basic button kit will give you a kickstart for multiple tap sizes, states and different use cases. The input fields should always be visually differentiated from buttons.

Buttons

Elements available for Schibsted designers in Figma.
All other users – contact the Global Brand Team if you need access.

The tap sizes for small, medium and large are 48px, 32px and 24px respectively. Toggle different properties on and off to achieve the desired functionality.

Primary, secondary and tertiary buttons have the following properties:

Size: small, medium, large
State: default, hover, pressed, focused, disabled
Action icon left and right: boolean
Icon: text property field
Label: boolean
Label content: text property field

Navigation buttons are meant to bridge contexts between Schibsted and family-brand pages.

Navigation buttons have the following properties:
Size: small, medium, large
State: default, hover, pressed, focused, disabled
Action icon: left and right: boolean
Icon: text property field see Icons

Label: boolean
Label content: text property field
Family brand: boolean

Text

Text links adds hyperlinks to paragraph or span text.

Text links have the following properties:
State: default, hover, pressed, focused, disabled
Label: text property field

 

Input

Elements available for Schibsted designers in Figma.
All other users – contact the Global Brand Team if you need access.

Your input fields should always be visually differentiated from buttons by using stroke around the field area and no colour, unless it is in focus.

Checkboxes

Checkboxes are good in lists. Consider using radio whenever a single option is at stake.

Checkboxes have the following properties:
Tap size: small, medium, large
State: checked, unchecked, indeterminate
Label: boolean
Label content: text property field
Hover state: boolean
Focus state: boolean

Dropdowns

Dropdowns have the following properties:
Size: large, medium
State: collapsed, hover, expanded, selected, focused, disabled
Listing: text, tags
Field label: boolean
Label content: text property field
Title: boolean
Title content: text property field
Icon: boolean

Radio

Radio inputs are good for a single option in an either/or choice context.

Radio buttons have the following properties:
Tap size: small, medium, large
Selected: boolean
Label: boolean
Label content: text property field
Hover state: boolean
Focus state: boolean

Search

Search inputs can have a reactive behaviour. Make sure to have focus states reflecting the task at hand.

Search input fields have the following properties:
Size: large, medium
State: default, hover, active, focused
Hint: boolean
Clear button: boolean
Placeholder content: text property field

Stepper

Stepper inputs are meant to change the content of a label in crescent/decrescent values.

Stepper inputs have the following properties:
Size: small, medium, large
Label content: text property field
Focus states: boolean
Hover states: boolean

Text

Text inputs are for free text. Make sure to be clear about the input limit so it doesn’t convert into a suggestion box in any context.

Text inputs have the following properties:
Size: medium, large
State: default, hover, active, filled, error, error hover, error active, focused
Label: boolean
Field label: text field property
Input: boolean
Input/placeholder label: text field property
Icon: boolean
Helper: boolean
Helper text label: text field property
Action: boolean
Action text label: text field property

Toggle

Switch buttons have only one option to be toggled on and off.

Switch buttons have the following properties:
Size: small, medium, large
Switch: boolean
Focus state: boolean
Hover state: boolean
Icon: boolean

Labels

Elements available for Schibsted designers in Figma.
All other users – contact the Global Brand Team if you need access.

The initial kit of Labels in the Schibsted Design System covers the following scenarios in small, medium and large sizes.

Tag

Simple tags are usually meant to communicate data properties (categories, etc.).

State for error, alert, success

Meant to communicate states.

Status label

Meant to communicate status, accompanied by a text label describing context.