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 ArrowUp = () => (
<svg
height="16"
strokeLinejoin="round"
viewBox="0 0 16 16"
width="16"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M8.70711 1.39644C8.31659 1.00592 7.68342 1.00592 7.2929 1.39644L2.21968 6.46966L1.68935 6.99999L2.75001 8.06065L3.28034 7.53032L7.25001 3.56065V14.25V15H8.75001V14.25V3.56065L12.7197 7.53032L13.25 8.06065L14.3107 6.99999L13.7803 6.46966L8.70711 1.39644Z"
/>
</svg>
);
export default function ShapesDemo() {
return (
<div className="flex justify-between items-center gap-2">
<Button aria-label="Upload" shape="square" size="tiny" svgOnly>
<ArrowUp />
</Button>
<Button aria-label="Upload" shape="square" size="small" svgOnly>
<ArrowUp />
</Button>
<Button aria-label="Upload" shape="square" svgOnly>
<ArrowUp />
</Button>
<Button aria-label="Upload" shape="square" size="large" svgOnly>
<ArrowUp />
</Button>
<Button aria-label="Upload" shape="circle" size="tiny" svgOnly>
<ArrowUp />
</Button>
<Button aria-label="Upload" shape="circle" size="small" svgOnly>
<ArrowUp />
</Button>
<Button aria-label="Upload" shape="circle" svgOnly>
<ArrowUp />
</Button>
<Button aria-label="Upload" shape="circle" size="large" svgOnly>
<ArrowUp />
</Button>
</div>
);
}