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 User Foundation 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 User Foundation 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.