Search the design system

Components – legacy

Dialog - contextual

Dialog-contextual is built on the dialog component.

Code

import { Dialog, DialogContextual, DialogConstants } from '@svenskaspelab/trinidad-ui'; import {
  AnimateInView
} from '@components/animate-in-view';

const _contextual = new DialogContextual({
  area: DialogConstants.area.CONTEXTUAL,
  branding: DialogConstants.branding.SPORT,
  attachTo: document.querySelector('.js-contextual-example-1'),
  title: '',
  message: [
    {
      type: DialogConstants.message.TEXT,
      text:
        'Simple contextual has no buttons and closes on click.'
    }
  ]
  })

const dialog = new Dialog();
dialog.add(_contextual);

//-----------------------------
// For Trinidad users
//-----------------------------
// In the world of Trinidad you can't use import, so you need to add
// a dependency to 'dialog' in your controller.
// Replace all 'DialogConstants' with svs.ui.dialog.
// Replace new DialogContextual with new svs.ui.dialog.Contextual({...
// Replace dialog.add(_contextual) with svs.ui.dialog.api.add(_contextual);

Properties

Check out Dialog component for more information on props, methods, callbacks etc.

Accessibility

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

Read more about WCAG 2.1 AA.

ComponentsDialog - contextual / Usage
ComponentsDots / Usage

© DesignTech - AB Svenska Spel

What's newTerms of useAccessibility statementCookiesTeams channel [Internal]
@svs/ui version
2.3.0

Feedback

We always want to improve the Design System and would be thrilled to get your feedback.

Please share your wisdom with us.

Microsoft Teams [internal]

Designsystem@svenskaspel.se