Components
Loading preview...
Trigger an action or event, such as submitting a form or displaying a dialog.
@shugar
npx shadcn@latest add https://21st.dev/r/shugar/button-1import { Button } from "@/components/ui/button-1";
const ArrowLeft = () => (
<svg
height="16"
strokeLinejoin="round"
viewBox="0 0 16 16"
width="16"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M6.46966 13.7803L6.99999 14.3107L8.06065 13.25L7.53032 12.7197L3.56065 8.75001H14.25H15V7.25001H14.25H3.56065L7.53032 3.28034L8.06065 2.75001L6.99999 1.68935L6.46966 2.21968L1.39644 7.2929C1.00592 7.68342 1.00592 8.31659 1.39644 8.70711L6.46966 13.7803Z"
/>
</svg>
);
const ArrowRight = () => (
<svg
height="16"
strokeLinejoin="round"
viewBox="0 0 16 16"
width="16"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M9.53033 2.21968L9 1.68935L7.93934 2.75001L8.46967 3.28034L12.4393 7.25001H1.75H1V8.75001H1.75H12.4393L8.46967 12.7197L7.93934 13.25L9 14.3107L9.53033 13.7803L14.6036 8.70711C14.9941 8.31659 14.9941 7.68342 14.6036 7.2929L9.53033 2.21968Z"
/>
</svg>
);
export default function PrefixAndSuffixDemo() {
return (
<div className="flex justify-between items-center gap-2">
<Button prefix={<ArrowLeft />}>Upload</Button>
<Button suffix={<ArrowRight />}>Upload</Button>
<Button prefix={<ArrowLeft />} suffix={<ArrowRight />}>
Upload
</Button>
</div>
);
}