Skip to main content

Usage

Learn the basics of working with the Pallote design system.

Import components (for Pallote React)​

After installing pallote-react, you can import any component of the design system. See Components for a full list of available components.

import React from 'react';
import { Button } from 'palotte-react';

export default function ButtonTest() {
  return <Button>Hello Pallote</Button>;
}

Customise​

Pallote is, at it's core, a style library built with SASS. The design tokens (colours, font styles and hierarchy, border radius, etc.) can be overriden to match with your own design system.

Override variables​

The framework has a set of built-in variables that create the design look and feel. To override them, add a variable with the same name in your Sass style file. To see details of each variable, see Variables pages.

@use 'pallote-css/styles/common/variables' with (
  $primary: blue,
  $secondary: purple
);

@use 'pallote-css/pallote';
Code order

The custom variables must be placed before importing the global Pallote CSS style.

Custom styles​

To change a component style, see the documentation for each component and add create an instance of the class with new properties in your style file.

@use 'pallote-css/pallote';

.button {
  text-decoration: underline;
}
Code order

The custom style must be placed after importing the global Pallote CSS style.

Custom classes​

You can add your own classes to any componnent to override the style.

For a React component, add a className prop to the component. It will be applied to the parent HTML tag.

import React from 'react';
import { Button } from 'palotte-react';
import 'path/to/custom.css';

export default function ButtonTest() {
  return <Button className="custom-class">Hello Pallote</Button>;
}