Docs
Button
Button
A versatile component designed to mimic the appearance and functionality of a traditional button, offering a range of customization options for various use cases.
Installation
npx shadcn add https://extend-ui.com/registry/button.json Button example usage
<Button variant={'bouncing'} tooltipText={`I'm bouncing!`}>
Button
</Button>Button component props
| Name | Type | Description |
|---|---|---|
| variant | default | destructive | outline | secondary | ghost | link | ringHover | glowingRing | shimmer | bouncing | Defines the visual style of the button. It supports several predefined styles like default, outline, etc. |
| size | default | sm | lg | icon | Determines the size of the button. Available sizes are sm, lg, and icon. |
| asChild | boolean | If true, the button will render as a child component using a Slot, useful for passing custom components. |
| loading | boolean | If true, shows a loading spinner instead of the button content. |
| loadingText | string | Text displayed next to the loading spinner when the button is in a loading state. |
| tooltipText | string | If provided, shows a tooltip when hovering over the button. |
| className | string | Additional CSS classes to apply custom styling to the button. |
| children | React.ReactNode | The content inside the button, typically text or an icon. |
| ref | React.Ref<HTMLButtonElement> | A ref to the button element for direct DOM manipulation. |
| ...props | React.ButtonHTMLAttributes | Additional props that can be passed to the button, such as onClick, disabled, etc. |