Component
Button
Button
Displays a button or a component that looks like a button.
Installation
Install the following dependencies
npm i @radix-ui/react-slotCopy and paste the following code into your project
components/ui/button/index.tsx
import * as React from 'react'
import { Slot } from '@radix-ui/react-slot'
import { styled, type HTMLStyledProps } from '@shadow-panda/styled-system/jsx'
import { button } from '@shadow-panda/styled-system/recipes'
const BaseButton = React.forwardRef<
HTMLButtonElement,
React.ButtonHTMLAttributes<HTMLButtonElement> & { asChild?: boolean; children?: React.ReactNode }
>(({ asChild = false, ...props }, ref) => {
const Comp = asChild ? Slot : 'button'
return <Comp ref={ref} {...props} />
})
BaseButton.displayName = 'Button'
export const Button = styled(BaseButton, button)
export type ButtonProps = HTMLStyledProps<typeof Button>Update the import paths to match your project setup
Usage
import { Button } from '@/components/ui/button'<Button variant="default" size="default">
Button
</Button>Recipe
Usage
You can use the button recipe to apply the button styles to any component.
import { button, type ButtonVariantProps } from '@shadow-panda/styled-system/recipes'<button className={button({ variant: 'outline', size: 'default' })}>Button</button>Link
You can use the button recipe to create a link that looks like a button.
import { button } from '@shadow-panda/styled-system/recipes'<Link className={button({ variant: 'outline' })}>Click here</Link>Alternatively, you can set the asChild parameter and nest the link component.
<Button asChild>
<Link href="/login">Login</Link>
</Button>