Size - Borda Documentation

0.2.0

Widget dimensions are controlled by the size property, which selects from a predefined scale ranging from xs to xxl. All internal elements — tooltip, buttons, close button — scale proportionally, so you never need to adjust individual components manually.

Available sizes

Value	Description
`xs`	Extra small — minimal footprint
`sm`	Small
`md`	Medium (default)
`lg`	Large
`xl`	Extra large
`xxl`	Maximum size

Extra small

import { useBorda, ComponentSize } from '@retoo/borda';

import '@retoo/borda/styles';

const borda = useBorda();

await borda.mount({
  steps: [
    {
      target: '#extra-small',
      title: 'Extra small',
      description: 'The most compact size — minimal padding and font sizes.',
      placement: 'bottom-start',
    },
  ],
  size: ComponentSize.XS,
});

Small

import { useBorda, ComponentSize } from '@retoo/borda';

import '@retoo/borda/styles';

const borda = useBorda();

await borda.mount({
  steps: [
    {
      target: '#small',
      title: 'Small',
      description: 'Slightly larger than extra small — still compact.',
      placement: 'bottom-start',
    },
  ],
  size: ComponentSize.SM,
});

Medium

import { useBorda, ComponentSize } from '@retoo/borda';

import '@retoo/borda/styles';

const borda = useBorda();

await borda.mount({
  steps: [
    {
      target: '#medium',
      title: 'Medium',
      description: 'The default size — balanced for most use cases.',
      placement: 'bottom-start',
    },
  ],
  size: ComponentSize.MD,
});

Large

import { useBorda, ComponentSize } from '@retoo/borda';

import '@retoo/borda/styles';

const borda = useBorda();

await borda.mount({
  steps: [
    {
      target: '#large',
      title: 'Large',
      description: 'Larger padding and font sizes for better readability.',
      placement: 'bottom-start',
    },
  ],
  size: ComponentSize.LG,
});

Extra large

import { useBorda, ComponentSize } from '@retoo/borda';

import '@retoo/borda/styles';

const borda = useBorda();

await borda.mount({
  steps: [
    {
      target: '#extra-large',
      title: 'Extra large',
      description: 'Spacious layout with generous padding.',
      placement: 'bottom-start',
    },
  ],
  size: ComponentSize.XL,
});

Extra extra large

import { useBorda, ComponentSize } from '@retoo/borda';

import '@retoo/borda/styles';

const borda = useBorda();

await borda.mount({
  steps: [
    {
      target: '#extra-extra-large',
      title: 'Extra extra large',
      description: 'Maximum size — biggest padding, fonts, and button targets.',
      placement: 'bottom-start',
    },
  ],
  size: ComponentSize.XXL,
});

Runtime

import { useBorda, ComponentSize } from '@retoo/borda';

import '@retoo/borda/styles';

const borda = useBorda();

const instance = await borda.mount({
  steps: [
    {
      target: '#sidebar',
      title: 'Navigation',
      description: 'Use the sidebar to browse sections.',
      placement: 'bottom-start',
    },
  ],
});

instance.config.mergeConfig({
  size: ComponentSize.LG,
});

The widget re-renders at the new size immediately. All child elements adapt automatically.

Overrides

Global size applies to all components at once, but each component can override it individually. This is useful when one element needs to stand out or stay compact regardless of the overall scale:

await borda.mount({
  steps: [...],
  size: ComponentSize.LG,
  tourTooltip: {
    size: ComponentSize.SM,
  },
  tourButtons: {
    size: ComponentSize.MD,
  },
  closeButton: {
    size: ComponentSize.SM,
  },
});

Overview

Structure of BordaConfig and the principle of disabling components with false.

Steps

Define tour steps with target elements, titles, descriptions, images, and lifecycle hooks.