Components
Explore the reusable UI components available across Svenska Spel products. Each component is designed to be consistent, accessible and compatible with Svenska Spel themes.
Use components as provided whenever possible to create familiar experiences and benefit from ongoing improvements. Select a component to find usage guidance, examples and implementation details.
Accordion
Use to provide additional information or controls without overwhelming the page.
Updated:
Avatar
Use to represent users or entities with a photo, initials, or placeholder.
Updated:
Badge
Use to indicate a notification, item count, or other information.
Updated:
Bet Button
Use in sports coupons to let users register selections for a team, player, or horse.
Updated:
Bet Prediction
Use in sports coupons to display a customer’s selections and their outcomes.
Updated:
Bottom sheet
Use to present complementary content or functionality connected to the main page.
Updated:
Button
Use to communicate and trigger actions throughout the user interface.
Updated:
Callout
Use to emphasise editorial messages, status, or contextual information.
Updated:
Card
Use to group related information and actions around a single topic.
Updated:
Checkbox
Use to let users enable any number of options in a form.
Updated:
Composable Modal
Use for focused modal tasks that require a custom layout.
Updated:
Date Picker
Use to let users select a single date or a range of dates.
Updated:
Dialog
Use sparingly for interruptive tasks that require the user to take action.
Updated:
Floating Action Bar
Use to keep high-priority actions or summaries available without interrupting the user flow.
Updated:
Input
Use to let users enter text or numbers in a field.
Updated:
Notice
Use when the user needs to understand status, risk, or the next step without leaving their flow.
Updated:
Pagination
Use when users need to navigate a collection that is too large for a single view.
Updated:
Popover
Use to provide contextual help or other supplementary inline information.
Updated:
Price label
Use to highlight pricing information, promotional offers, or value.
Updated:
Radio group
Use to let users select exactly one option from a group of at least two.
Updated:
Select
Use to let users choose one option from a longer list.
Updated:
Separator
Use to organise content, create visual rhythm, and establish hierarchy.
Updated:
Slider
Use to select an approximate value from a continuous, predetermined range.
Updated:
Snackbar
Use to briefly confirm a completed action or report an error without interrupting the flow.
Updated:
Switch
Use to let users immediately enable or disable a setting.
Updated:
Table
Use to display structured data in rows and columns for easy scanning and comparison.
Updated:
Tabs
Use to let users switch content within a section.
Updated:
Tabs Menu
Use to organise related navigation options into a clear, prioritised hierarchy.
Updated:
Toggle Group
Use to let users make one mutually exclusive choice or multiple independent selections.
Updated:
Tooltip
Use to provide short contextual information about an element when space is limited.
Updated:
Legacy components
If you are looking for documentation for legacy components, you will find it in our old internal styleguide.