Comments (2)
In order for asChild to work, your component needs to forward the ref and the props to an element
from primitives.
I am running into the same issue with React 19. I have ref being passed to the component.
button.tsx
export interface ButtonProps
extends ButtonHTMLAttributes<HTMLButtonElement>,
VariantProps<typeof buttonVariants> {
asChild?: boolean
loading?: boolean
ref?: Ref<HTMLButtonElement>
}
export const Button: FC<ButtonProps> = ({
className,
variant,
size,
asChild = false,
loading = false,
disabled = false,
ref,
...props
}) => {
const Comp = pipe(
asChild,
Boolean.match({ onFalse: () => 'button', onTrue: () => Slot }),
)
return (
<Comp
className={cn(buttonVariants({ variant, size }), className)}
ref={ref}
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
disabled={disabled || loading}
{...props}
/>
)
}
notificationsButton.tsx
<Tooltip>
<TooltipTrigger asChild>
<Button variant={'secondary'} size={'icon'} className={'relative'}>
<NotificationIcon className={'h-5 w-5'} />
</Button>
</TooltipTrigger>
<TooltipContent>Notifications</TooltipContent>
</Tooltip>
from primitives.
Related Issues (20)
- focus-visible is triggered when opening a dialog with a button that contains svg
- Tooltip instant-open state not working?
- selectable list component
- Hook that exposes an `onClose` for a Popover HOT 1
- Dialog component closing unexpectedly HOT 3
- Select causes parent Dialog to fail on outside click HOT 1
- No CHANGELOG provided for latest minor updates HOT 2
- [Progress] "Uncaught SyntaxError: missing ) after argument list" When building in nextjs HOT 5
- Allow disabling the `display: table` CSS on `SrollArea` HOT 1
- Module parse failed: Unexpected token (105:69) HOT 9
- Slider inverted behaves the same way as dir='rtl' HOT 1
- race condition when using select in dialog
- Radix Checkbox - CheckedState is not exported HOT 2
- Failing tests with react testing library, vitest and [email protected] HOT 4
- [Select] Allow setting `form` prop
- Changelog with breaking changes HOT 3
- TooltipProviderProps no longer exported after update to @radix-ui/react-tooltip v1.1.1 HOT 1
- Tooltip Content asChild crashes
- There's no "modal" prop in the Select component HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from primitives.