Usage

import { Spinner } from '@pillar-ui/core'

<Spinner />

Examples

Color

Default

p

Type

'i' | 'd' | 'su' | 'se' | 'w' | 'p' | 'b' | 'o'

import { Spinner } from '@pillar-ui/core'

export const SpinnerColor = () => {
  return (
    <>
      <Spinner color="su" />
      <Spinner color="d" />
      <Spinner color="w" />
      <Spinner color="p" />
      <Spinner color="se" />
      <Spinner color="b" />
      <Spinner color="i" />
    </>
  )
}

Size

Default

4

Type

'1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9'

import { Spinner } from '@pillar-ui/core'

export const SpinnerSize = () => {
  return (
    <>
      <Spinner size="1" />
      <Spinner size="2" />
      <Spinner size="3" />
      <Spinner size="4" />
      <Spinner size="5" />
      <Spinner size="6" />
      <Spinner size="7" />
      <Spinner size="8" />
      <Spinner size="9" />
    </>
  )
}

Thickness

Default

2

Type

'1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9'

import { Spinner } from '@pillar-ui/core'

export const SpinnerThickness = () => {
  return (
    <>
      <Spinner thickness="1" />
      <Spinner thickness="2" />
      <Spinner thickness="3" />
      <Spinner thickness="4" />
      <Spinner thickness="5" />
      <Spinner thickness="6" />
    </>
  )
}

Invert

import { Flex, Spinner } from '@pillar-ui/core'

export const SpinnerInvert = () => {
  return (
    <>
      <Flex gap="4" items="center">
        <Spinner color="su" />
        <Spinner color="d" />
        <Spinner color="w" />
        <Spinner color="p" />
        <Spinner color="se" />
        <Spinner color="b" />
      </Flex>
      <Flex gap="4" items="center">
        <Spinner invert color="su" />
        <Spinner invert color="d" />
        <Spinner invert color="w" />
        <Spinner invert color="p" />
        <Spinner invert color="se" />
        <Spinner invert color="b" />
      </Flex>
    </>
  )
}

Customizing Appearance

Our design system uses CSS variables to set default styles for components. You can customize these variables to change the overall look of your component accross your project.

Available Properties:

/* Change the default size of the Button */
--spinner-size:;