Components

Spinner

A loading indicator component with three variations - border, grow, and logo.

Usage

Use the Spinner component to indicate loading states in your application. Choose between border, grow, or logo variations, and customize with color, size, and label props.

Loading preview...

<template>
  <div class="flex flex-wrap gap-4 items-center">
    <MeSpinner type="border" color="primary" size="xsm" />
    <MeSpinner type="border" color="success" size="sm" />
    <MeSpinner type="grow" color="warning" size="md" />
    <MeSpinner type="grow" color="error" size="lg" />
    <MeSpinner type="logo" color="primary-2" />
  </div>
</template>

Color

Use the color prop to customize the spinner color.

For border and grow: use semantic tokens (primary, neutral, success, warning, error).

For logo: only primary-1 and primary-2 are available.

<template>
  <div class="flex flex-wrap gap-4 items-center">
    <MeSpinner type="border" color="primary" />
    <MeSpinner type="border" color="error" />
    <MeSpinner type="grow" color="success" />
    <MeSpinner type="grow" color="warning" />
    <MeSpinner type="logo" color="primary-2" />
  </div>
</template>

Fluid

The fluid prop makes the spinner expand to fill the container.

<template>
  <div>
    <MeSpinner type="border" fluid />
  </div>
</template>

Label

The label prop provides an accessible text description. It's hidden visually but read by screen readers.

<template>
  <div class="flex flex-wrap gap-4 items-center">
    <MeSpinner type="grow" color="primary" label="Carregando dados..." />
    <MeSpinner type="border" color="neutral" label="Buscando informações..." />
  </div>
</template>

Size

The size prop defines the spinner dimensions (border and grow types only). For the variation "logo", the size is fixed.

<template>
  <div class="flex flex-wrap gap-4 items-center">
    <MeSpinner type="border" size="xsm" />
    <MeSpinner type="border" size="sm" />
    <MeSpinner type="border" size="md" />
    <MeSpinner type="border" size="lg" />
  </div>
</template>

Type

Choose between border, grow, or logo variations.

<template>
  <div class="flex flex-wrap gap-4 items-center">
    <MeSpinner type="border" />
    <MeSpinner type="grow" />
    <MeSpinner type="logo" />
  </div>
</template>

API

Props

Prop	Default	Type
`color`	`'neutral'`	`'primary' \| 'neutral' \| 'success' \| 'warning' \| 'error' \| 'primary-1' \| 'primary-2'` - Spinner color. Logo type supports only `primary-1` and `primary-2`
`fluid`	`false`	`boolean` - Makes the spinner take the full width and height of its container
`label`	`'Loading...'`	`string` - Accessible label for screen readers. Also displayed visually in `grow` type
`type`	`'border'`	`'border' \| 'grow' \| 'logo'` - Defines which spinner variation to render
`size`	`'sm'`	`'xsm' \| 'sm' \| 'md' \| 'lg'` - Spinner size. Not applied when type is `logo`

NavBar

A navigation bar located at the bottom of the page on smaller screens.

Tooltip

A popup that reveals information when hovering over an element.