Button

Play around with props, edit and copy code.

Theming

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.

Examples

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.

Code

// 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>
</div>

// 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.

Focused/CTA button

Known as focus or green in our system.

Ghost button

Known as clean in our system.

Transparent button

Known as secondary in our system.

Properties

Button

Accessibility