Named, decorative, and in a button

// apps/docs/examples/ui/spinner.tsx'use client';
import {Button} from '@workspace/active-ui/components/primitives/button';import {Spinner} from '@workspace/active-ui/components/primitives/spinner';
/** * An indicator that something is busy. On its own it needs a name * (`label`) and is announced as a status; beside text that already says * what happens, it is decoration and stays silent. */export default function SpinnerExample() {  return (    <div className="flex flex-wrap items-center justify-center gap-6">      <Spinner label="Loading the participants" className="size-6" />      <p className="text-muted-foreground flex items-center gap-2 text-sm">        <Spinner />        Checking the addresses…      </p>      <Button disabled>        <Spinner data-icon="inline-start" />        Saving…      </Button>    </div>  );}