DocsBlog

  • 0.25.3

  • light

    dark

    system

    Switch mode

  • Cerberus

    Acheron

    Elysium

Get Started
Components
Styling
Theming

Concepts

OverviewCompositionTesting

Layout

Aspect RatioBleedBoxCenterContainerDividerFlexFloatGridLink OverlayScrollableStackWrap

Components

AccordionAdmonitionAvatarButtonCarouselCheckboxClipboardCollapsibleComboboxConfirm ModalCTAModalDate PickerDialogFieldFieldsetFile UploaderIcon ButtonInputLoading StatesMenuNotificationsNumber InputPin InputProgressPrompt ModalRadioRatingSelectSplit ButtonSwitchTableTabsTagTextTextareaToggleTooltip

Utilities

Client OnlyDownload TriggerEnvironmentFeature FlagsFocus TrapForFormat ByteFormat NumberFormat Relative TimeFrameHighlightJSON Tree ViewLocaleLocal StoragePortalPresenceShowsplitPropsTheme

Loading States

Loading states are used to indicate that content is being loaded.

  • npm
  • source

Skeletor API

To show a skeleton loading state, simply add the aria-busy attribute to the element you want to show the loading state for.

<div aria-busy="true">
  <p>This is now hidden</p>
</div>

This is a description of something.

Trash content

Trash content is a place where you can find all the content that you have deleted. You can restore or permanently delete the content from here.

Skeleton
Copy
import { Tag, Text } from '@cerberus/react'
import { Box, Circle, HStack, VStack } from 'styled-system/jsx'
import { css } from 'styled-system/css'


export function OverviewPreview() {
  return (
    <HStack justify="space-between" w="3/4">
      <VStack alignItems="flex-start">
        <HStack justify="space-between" w="full">
          <Box aria-busy="true" rounded="sm">
            <Text>This is a description of something.</Text>
          </Box>
          <HStack>
            <Circle aria-busy="true" size="6" />
            <Circle aria-busy="true" size="6" />
            <Circle aria-busy="true" size="6" />
          </HStack>
        </HStack>
        <Box aria-busy="true" rounded="sm">
          <Text as="h2">Trash content</Text>
          <Text>
            Trash content is a place where you can find all the content that you
            have deleted. You can restore or permanently delete the content from
            here.
          </Text>
        </Box>
        <Tag
          className={css({
            alignSelf: 'center',
          })}
          shape="pill"
        >
          Skeleton
        </Tag>
      </VStack>
    </HStack>
  )
}

Spinners

This is some data about something

This is a detail about that text of something.
Spinner
Copy
import { Button, Spinner } from '@cerberus/react'


function MyComponent() {
  return (
    <Button>
      <Spinner size="1em" />
      Saving
    </Button>
  )
}

Customization

The Spinner component is a simple SVG element that can be styled with CSS.

Copy
import { cerberus, Spinner } from '@cerberus-design/react'


function CustomSpinner() {
  return (
    <cerberus.div
      css={{
        color: 'yellow',
        w: 20,
      }}
    >
      <Spinner />
    </cerberus.div>
  )
}

API

export type SpinnerProps = SVGProps<SVGSVGElement> & {
  size?: number | string
}


define function Spinner(props: SpinnerProps): ReactNode

Props

The Spinner component accepts the same props as an SVG element.

NameDefaultDescription
sizeA strict height and width of the Spinner.

On this page

  • Edit this page on Github
Cerberus Design System | Docs