import { Notification, KIND } from "baseui/notification";
import { StyledLink } from "baseui/link";

import Example from "../../components/example";
import Layout from "../../components/layout";
import Exports from "../../components/exports";

import SpinnerBasic from "examples/spinner/basic.tsx";
import SpinnerSize from "examples/spinner/size.tsx";
import SpinnerCustom from "examples/spinner/custom.tsx";
import SpinnerSpan from "examples/spinner/span.tsx";

import { Spinner } from "baseui/spinner";
import * as SpinnerExports from "baseui/spinner";

import Yard from "../../components/yard/index";
import spinnerYardConfig from "../../components/yard/config/spinner";

export default Layout;

# Spinner

<Yard placeholderHeight={44} {...spinnerYardConfig} />

Spinners provide a visual cue that an action is processing awaiting a course of change or a result.

## Examples

<Example title="Basic" path="spinner/basic.tsx">
  <SpinnerBasic />
</Example>

<Example title="Sizes" path="spinner/size.tsx">
  <SpinnerSize />
</Example>

<Example title="Element" path="spinner/span.tsx">
  <SpinnerSpan />
</Example>

## API

<Exports
  component={SpinnerExports}
  title="Spinner exports"
  path="baseui/spinner"
/>

By default the spinner styles a single `div` element. You can change the underlying element type by using the `$as` prop. In this example we change it to a `span`. This allows us to use the `Spinner` inside of a `p` element.

<Example title="Customizing" path="spinner/custom.tsx">
  <SpinnerCustom />
</Example>

If you want to customize the default styling of the spinner you can extend it using [`withStyle`](/blog/base-web-v8/#themed-withstyle-function). In this example we modify the size of the spinner (via `width`, `height`, and `borderWidth`) as well as the highlight color (via `borderTopColor`). You could also use `withStyle` to add margins to the spinner or align it within another element.