- Accordion
- Alert Dialog
- Avatar
- Badge
- Banner
- BreadcrumbSOON
- Button
- Button Group
- Calendar
- Callout
- Card
- Checkbox
- CodeblockSOON
- Color PickerNEW
- Container
- Control Group
- Dialog
- Divider
- Dropdown
- File UploaderNEW
- Flex
- FormSOON
- Grid
- IconSOON
- ImageSOON
- Input
- LinkNEW
- List
- MenuSOON
- PaginationSOON
- Popover
- Progress
- Radio
- Section
- Select
- Skeleton
- SliderSOON
- SpinnerSOON
- Switch
- Table
- Tabs
- Tag
- Textarea
- ToastSOON
- Tooltip
Popover
More info on demand? Yes, please! With our Popover, it's always a click away
Example
1 import { Popover, Button, Typography, Flex } from '@haktos/sugarcoat-ui';23 <Flex gap='3' direction='column' justify='center'>4 <Popover trigger={5 <Button>Quick tip</Button>6 }>7 <Flex direction='column' justify='start' items='start' css={{8 mt: '$3'9 }}>10 <Typography.Paragraph>11 Tip of the day: Use Sugarcoat UI's Flex component for a quick and easy way to handle your layout needs12 </Typography.Paragraph>13 </Flex>14 </Popover>15 </Flex>16
API Reference
It builds on top of Radix-UI Popover
Component | Description |
---|---|
Popover | Your secret tool for context-based interactivity. Create hoverable or clickable overlays, perfect for user guidance, tooltips, or even simple dropdowns. It’s an excellent assistant that only shows up when needed, and when it does, it surely stands out. |
Popover
Prop | Type | Default | Explanation |
---|---|---|---|
align | string | center | Lets you align the Popover content to the start, center, or end of your trigger element. It's all about perfect positioning. |
arrow | boolean | true | The small, sharp tip pointing back to the trigger. Disable it if you think you don't need it. |
showCloseButton | boolean | true | Want to give users the power to close the Popover? Set this property to true and a close button shall appear. |
side | string | bottom | Specifies the side (top, bottom, left, right) where the Popover pops out relative to the trigger. Tailor it to best fit your layout. |
open | boolean | Control the visibility state of the Popover with this prop. Manage it externally for total control. | |
defaultOpen | boolean | If state management isn't your thing, use this to determine whether the Popover starts open. | |
onOpenChange | function | A callback function for when the open state changes. Great for managing interactivity and tracking user behavior. | |
modal | boolean | true | Decide whether interaction with outside elements should be enabled or disabled when the Popover is open. It's about keeping the user's focus where you want it. |
Note: Besides the above, you can use all the props specified here