default secondary destructive outline ghost link

); }; export LoadingButtonUsage; `,__src__:"src/registry/default/example/extra-new/loading-button/loading-button-usage.tsx","data-rehype-pretty-code-figure":"",children:(0,l.jsx)(n.pre,{style:{backgroundColor:"#22272e",color:"#adbac7"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark-dimmed",__rawString__:`"use client"; import * as React from "react"; import { LoadingButton } from "@/components/ui/extension/loading-button"; const LoadingButtonUsage = () => { const [loading, setLoading] = React.useState(false); const onClick = () => { setLoading(true); setTimeout(() => { setLoading(false); }, 1000); }; return (

default secondary destructive outline ghost link

); }; export LoadingButtonUsage; `,__src__:"src/registry/default/example/extra-new/loading-button/loading-button-usage.tsx",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"github-dark-dimmed",style:{display:"grid"},children:[(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#96D0FF"},children:'"use client"'}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:" *"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:" as"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" React "}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#96D0FF"},children:' "react"'}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" { LoadingButton } "}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#96D0FF"},children:' "@/components/ui/extension/loading-button"'}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#DCBDFB"},children:" LoadingButtonUsage"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" () "}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F47067"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" ["}),(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:"loading"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:"setLoading"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:"] "}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" React."}),(0,l.jsx)(n.span,{style:{color:"#DCBDFB"},children:"useState"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:"false"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:");"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F47067"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#DCBDFB"},children:" onClick"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" () "}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#DCBDFB"},children:" setLoading"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:"true"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:");"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#DCBDFB"},children:" setTimeout"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:"(() "}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#DCBDFB"},children:" setLoading"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:"false"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:");"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" }, "}),(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:"1000"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:");"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" };"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F47067"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#8DDB8C"},children:"div"}),(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#96D0FF"},children:'"flex flex-col gap-3"'}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#8DDB8C"},children:"LoadingButton"}),(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:" loading"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:"loading"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:" onClick"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:"onClick"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" default"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#8DDB8C"},children:"LoadingButton"}),(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:" variant"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#96D0FF"},children:'"secondary"'}),(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:" loading"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:"loading"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:" onClick"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:"onClick"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" secondary"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#8DDB8C"},children:"LoadingButton"}),(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:" variant"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#96D0FF"},children:'"destructive"'}),(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:" loading"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:"loading"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:" onClick"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:"onClick"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" destructive"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#8DDB8C"},children:"LoadingButton"}),(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:" variant"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#96D0FF"},children:'"outline"'}),(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:" loading"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:"loading"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:" onClick"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:"onClick"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" outline"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#8DDB8C"},children:"LoadingButton"}),(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:" variant"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#96D0FF"},children:'"ghost"'}),(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:" loading"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:"loading"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:" onClick"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:"onClick"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" ghost"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#8DDB8C"},children:"LoadingButton"}),(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:" variant"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#96D0FF"},children:'"link"'}),(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:" loading"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:"loading"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:" onClick"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:"onClick"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" link"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" );"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:"};"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" LoadingButtonUsage;"})]})]})})})}),` `,(0,l.jsx)(n.h3,{id:"aschild",children:"asChild"}),` `,(0,l.jsx)(o,{name:"loading-button-as-child",children:(0,l.jsx)(n.figure,{"data-language":"tsx","data-theme":"default",__rawString__:`import React from "react"; import { LoadingButton } from "@/components/ui/extension/loading-button"; import Link from "next/link"; const LoadingButtonAsChild = () => { return (

As a \`p\` child

as a \`Link\` child as a \`Link\` child with \`secondary\` variant

); }; export LoadingButtonAsChild; `,__src__:"src/registry/default/example/extra-new/loading-button/loading-button-as-child.tsx","data-rehype-pretty-code-figure":"",children:(0,l.jsx)(n.pre,{style:{backgroundColor:"#22272e",color:"#adbac7"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark-dimmed",__rawString__:`import React from "react"; import { LoadingButton } from "@/components/ui/extension/loading-button"; import Link from "next/link"; const LoadingButtonAsChild = () => { return (

As a \`p\` child

as a \`Link\` child as a \`Link\` child with \`secondary\` variant

); }; export LoadingButtonAsChild; `,__src__:"src/registry/default/example/extra-new/loading-button/loading-button-as-child.tsx",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"github-dark-dimmed",style:{display:"grid"},children:[(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" React "}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#96D0FF"},children:' "react"'}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" { LoadingButton } "}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#96D0FF"},children:' "@/components/ui/extension/loading-button"'}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" Link "}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#96D0FF"},children:' "next/link"'}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#DCBDFB"},children:" LoadingButtonAsChild"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" () "}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F47067"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#8DDB8C"},children:"div"}),(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#96D0FF"},children:'"flex flex-col items-center gap-2"'}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#8DDB8C"},children:"LoadingButton"}),(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:" asChild"}),(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:" loading"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#8DDB8C"},children:"p"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:">As a `p` child"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#8DDB8C"},children:"LoadingButton"}),(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:" asChild"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#8DDB8C"},children:"Link"}),(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:" href"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#96D0FF"},children:'"#"'}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:">as a `Link` child"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#8DDB8C"},children:"LoadingButton"}),(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:" asChild"}),(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:" variant"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#96D0FF"},children:'"secondary"'}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#8DDB8C"},children:"Link"}),(0,l.jsx)(n.span,{style:{color:"#6CB6FF"},children:" href"}),(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#96D0FF"},children:'"#"'}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:">as a `Link` child with `secondary` variant"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" );"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:"};"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F47067"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#ADBAC7"},children:" LoadingButtonAsChild;"})]})]})})})})]})}function C(e={}){let{wrapper:n}=e.components||{};return n?(0,l.jsx)(n,{...e,children:(0,l.jsx)(u,{...e})}):u(e)}function r(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return v(k);})(); ;return Component;

Loading Button

Installation

Run the following command

Usage

Customize

asChild

Table of Content

Github