Hero Image



Play around with props, edit and copy code.


Button support theming through css custom properties (sometimes referred to as CSS variables or cascading variables). If no custom properties are set, the default colors will be used.

You can either set the custom properties in the :root {...} of your css or on a class if you only want to apply a theme to a specific area or node (DOM) of the page.


Three different sized and themes buttons.

*This is only examples to demonstrate how the theming works and not something that is used on any of Svenska Spel's websites.


// React code
<div className="btn-theme-example-1">
  <Button inverted size={700}>Themed primary size 700</Button>
  <Button transparent size={500}>Themed transparent size 500</Button>
  <Button focus rounded>Themed cta rounded</Button>

// CSS code
.btn-theme-example-1 {
  // Primary
  --btn-primary: blue;
  --btn-on-primary: white;
  --btn-primary-hover: #2525f5;
  --btn-on-primary-hover: white;
  --btn-primary-active: #03039d;
  --btn-on-primary-active: white;
  // Transparent
  --btn-transparent: orange;
  --btn-on-transparent: orange;
  --btn-transparent-hover: #bb7c01;
  --btn-on-transparent-hover: #bb7c01;
  // CTA
  --btn-cta: linear-gradient(45deg, rgba(0,196,181,1) 0%, rgba(78,32,77,1) 50%);
  --btn-on-cta: white;
  --btn-cta-hover: linear-gradient(45deg, rgba(0,196,181,1) 0%, rgba(78,32,77,1) 80%);
  --btn-on-cta-hover: white;
  --btn-cta-active: linear-gradient(45deg, rgba(0,196,181,1) 0%, rgba(78,32,77,1) 30%);
  --btn-on-cta-active: white;
  display: flex;
  gap: 6px;
  align-items: center;

CSS custom properties (variables)

Primary button

Known as ìnverted in our system.

Custom property nameDescriptionDefault value
--btn-on-primaryText color@white
--btn-primary-hoverBackground: Hover statelighten(@navy, 5%);
--btn-on-primary-hoverText: Hover state@white
--btn-primary-activeBackground: Active statedarken(@navy, 5%);
--btn-on-primary-activeText: Active state@white
--btn-primary-disabled:Background: Disabled state@grey-400;
--btn-on-primary-disabledText: Disabled state@grey-300;

Focused/CTA button

Known as focus or green in our system.

Custom property nameDescriptionDefault value
--btn-ctaBackground@green / @sport
--btn-on-ctaText color@white
--btn-cta-hoverBackground: Hover statelighten(@green/@sport, 5%);
--btn-on-cta-hoverText: Hover state@white
--btn-cta-activeBackground: Active statedarken(@green/sport, 5%);
--btn-on-cta-activeText: Active state@white
--btn-cta-disabled:Background: Disabled state#d2efd5
--btn-on-cta-disabledText: Disabled state@white

Ghost button

Known as clean in our system.

Custom property nameDescriptionDefault value
--btn-on-ghostText color@blue
--btn-ghost-hoverBackground: Hover state@grey-100
--btn-on-ghost-hoverText: Hover state@blue
--btn-ghost-activeBackground: Active state@grey-200
--btn-on-ghost-activeText: Active state@blue
--btn-ghost-disabled:Background: Disabled statetransparent
--btn-on-ghost-disabledText: Disabled state@grey-300

Transparent button

Known as secondary in our system.

Custom property nameDescriptionDefault value
--btn-transparentBorder color@navy
--btn-on-transparentText color@navy
--btn-transparent-hoverInner box shadow@navy
--btn-on-transparent-hoverText color
--btn-transparent-activeInherits from default
--btn-on-transparent-activeInherits from default
--btn-transparent-disabledBorder: Disabled statelighten(@grey-600, 20%);
--btn-on-transparent-disabledText: Disabled statelighten(@grey-600, 20%);



Prop nameTypeDefault ValueDescription
blockboolfalseSet true to get a full width button. Perfect for buttons placed in Grid.
circleboolfalseSet to true for a circular button.
classNamestring''Custom classes
Componentnode'button'Button is the default node type.
focusboolfalseSet true for a CTA button.
ghostboolfalseSet true for a ghost button
invertedboolfalseSet true for a primary button. Set false for a primary button on dark surfaces.
sizeunion300300 is default. 100 small button
thinboolfalseUse thin borders. May only be used by Svenska Spel Sport & Casino
transparentboolfalseSet true for a secondary button Combine with inverted true on dark surfaces for secondary button.
typeenum'button'Use submit for forms.
children *nodeContent.
disabledboolSet true to get a disabled button
doubleLinesboolUsen in tight areas where the content in a button needs to be placed on two lines.
hrefstringAdd href to turn button in to a <a-tag.
iconPositionenumPosition of icon.
onClickfuncRun callback function on click.
roundedboolSet true for a rounded button


This component has been validated to meet the WCAG 2.1 AA accessibility guidelines.

Additional information regarding accessibility of this component below.

* Remember to check color contrast when applying your own custom theme.

Read more about WCAG 2.1 AA.