• Docs
  • Blog

    • 0.25.1

    • 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