This component library contains a set of Vue components used throughout Serato web environments.

Usage no npm install needed!

<script type="module">
  import seratoComponentLibrary from 'https://cdn.skypack.dev/@serato/component-library';


Component library

This component library contains a set of Vue components used throughout Serato web environments.

Install the component library in your project

npm install --save @serato/component-library

Then in your main.ts/js file include

import '@serato/component-library'

And import the CSS into SCSS with:

@import '@serato/component-library/dist/component-library';



Tidy ups to the Text Area, Toggle Input and standard link components with some fixes to the Toggle Input. WEB-5980 Tidying up some small pieces of the Input Text Area Atom

  • Add 1em of padding inside the text area
  • Give the text a 1.6em line height


  • Updated page title and H2 into Toggle Input
  • Aligned examples left
  • Added logic to trigger toggle when clicking on the label
  • Added togglePosition property to display toggle either to the left/right of the label
  • Added stories to display toggle position
  • Changed wouse cursor to select (Mickey Mouse hand) when hovered on label


  • Updated heading and base link to standard link
  • Added stories to give examples on icon and iconPosition property
  • Added color for icons
  • Aligned examples to the left of docs page
  • Add link without underline
  • change font size into 0.85em


More tidy up to help us on our journey to v1.0


This is a general update to clean up the Input Text Area atom.

  • Widen border on the atom
  • Misc copy updates

Update to the Card molecule and atom

  • Remove all documentation/stories after "multiple base cards" in the card molecule
  • Update headings/name of Base Card to Standard Card
  • General copy changes/fixes
  • Removing padding top and bottom
  • Using line height to create margins
  • Size update to match design


Updating documentation for Label into storybook. Fixing style such as moving margin on title instead of text. WEB-5828

  • Show label with text into the documentation
  • Move spacing into title instead of text to behave as expected on small screen


Base card docs updates

WEB-5565 Updates to Base Card atom in Storybook

  • Second paragraph in description ‘Can be displayed with…’ is bought up to sentence above - so there’s only one paragraph
  • Remove 'Single MySerato Expansion Card’ content (title, description and atom)
  • Remove ‘Multiple Cards’ content (title, description and atom)


[WEB-4546] Fix Typography inconsistency

  • Make sure the typography guideline page display the correct informations.
  • Make sure that per components: -- font-size and line-height are respected. -- Use “em“ for font-size and line height.

[WEB-4501] Add Expand/full width support on Button and Form elements

  • Create Full Width support for components in the pattern library to remove issue on fix width parent component. This is for all form comopnents.


Tidying up some documentation pages

WEB-5382 Tidy up of the Icons docs page

  • horizontal scrollbar on icons table removed
  • info icon updated to regular version instead of solid
  • text in rows in icon table left aligned to better align with header
  • description heading made H3

WEB-5379 Tidy up to the colours docs page

  • Copy updates to colours sections
  • Added "light" version of all colours
  • Updated naming convention of colours to match variable names (e.g. $dj-pro-blue-dark = "DJ Pro blue dark")
  • Updated hex codes to all be uppercase
    • Two colour hex codes had issues (WHITE and GREY_30) where they were always converted to lowercase when passed into the ColorItem. This has been worked around by passing in their hex codes directly so that they match the format of the other colours.


Updating BaseButton to hands icons, also some clean up to docs and a nice bugfix.


  • Add caret up/down icon to More filters button
  • Add icon and iconPosition state to BaseButton
  • Update docs and add two new stories to show buttons with icons in different positions
  • Update descriptions of button properties more readable
  • Add transition to inverted-light-blue button on the font color change on hover

Component modified

  • BaseButton


  • Fix height of small, medium, large and extra small buttons so that padding is in proportion to font-size


A new behaviour option for buttons and stories to show the DJ Producer bundle.

[WEB-5178] Toggle button updates for filtering logic

  • Add isToggledOn State for base-button to toggle buttons
  • Rename a-btn--is-clicked into a-btn--is-toggled-on
  • Remove a-btn--disabled-grey because Marketing changed the design and we don't need it anymore.
  • Format a-btn--is-toggled-on style to disable hover in mobile and solve IE11 compatibility issue
  • Change logic of toggling buttons. Toggle button when both isToggleable and isToggledOn true.

[WEB-5272] Showing Producer DJ bundle sub states

  • Create card for DJ Producer in expansionCard doc.stories file
  • Create new linear background for the new product car
  • Update the Logo component with the new logo DJPRODUCER


A small bugfix in this release.

  • [WEB-5259] Fixing the Expansions Card label font color. It was always orange, when it should always be white. Now they will always be white.


A new Button behaviour and a whole lot of tidy up.

  • [WEB-5188] Creating a Toggleable button with a new colorway.

    • add 2 new colors inverted-light-blue and disabled-grey.
    • isToggleable option added to BaseButton as a non-default prop.
    • New story for isTogglable being used, new section in BaseButton docs too.
  • Tidy up of Pattern Library ESList issues

    • Fixing linter issues.
    • Adding new linter rules.
    • Adding eslint files.
    • Updating script exportForSeratoWebsites to work with new linter rules.


Some big changes to the way we handle tooltips here.

Behaviour changes:

  • Hovering on the tooltip bubble or arrow will no longer keep it open
  • Positioning is now deferred to Popper.js, with allowFlip and preventOverflow props controlling overflow prevention behaviour. These props are enabled by default.
  • There is no align option, as preventOverflow replaces the requirement for cross-axis positioning of the tooltip bubble when there isn't enough space Styling changes:
  • The tooltip arrow has been reimplemented in line with Popper's tutorial. Popper requires a separate DOM element for the arrow. It has now been implemented as a separate div. The triangle's construction is different too, it is now a diamond that is positioned beneath the bubble to look like a triangle.
  • Z-index of the tooltip bubble has been bumped up to int max so that it stays over most elements Interface changes:
  • Added allowFlip and preventOverflow props to Tooltip to control overflow behaviour
  • Removed align prop from Tooltip
  • Removed isInList and positionForIcon in Tooltip which are no longer required as Popper can handle these cases
  • Removed isInList from ChipTag which existed solely to pass into its child Tooltip Story changes:
  • Added space around stories where tooltips were already overflowing
  • Added a behaviour story for the tooltips to demonstrate overflow prevention behaviour
  • Removed alignment story from tooltip Dependency changes:
  • Added Popper.JS as a dependency

NOTE: npm install will need to be run before being able to use this version of the Pattern Library


  • [WEB-4812] Updates to Pricing cards
    • Tweaking copy line height, font-size
    • Tweaking ribbon line height
  • [WEB-4639] Bugfix, button atom fixes
    • Fixing issues with transparent hover states making fonts illegible
    • Fixing losing state behaviour
  • [WEB-4730] Bugfix label text too big
    • Making label secondary text a bit smaller
  • [WEB-4483] Bugfix link atom fix
    • Change textlink to use display: inline-block to fix underline jiterriness