PopoverButton
A button designed to be used as the Popover content.
Showcase
Source
<script>
import { PopoverPositions } from 'attractions/popover';
</script>
<Popover position={PopoverPositions.BOTTOM}>
<Button>hover or focus me</Button>
<div slot="popover-content">
<PopoverButton>copy</PopoverButton>
</div>
</Popover>Properties #
Functional Properties
Name | Default | Type | Description |
|---|---|---|---|
... | any | Everything will be passed to the underlying <button> element. |
Class Properties
All <PopoverButton> components use the .popover-button class.
Falsy values passed to classes will be disregarded.
Name | Default | Type | Description |
|---|---|---|---|
class | null | string | A class string to add to the component. |
Events #
Name | Event Detail | Description |
|---|---|---|
click | { nativeEvent } | Fired when the button is clicked. |
Slots #
Default slot
The content of the button.
SCSS Variables #
Name | Description | Default |
|---|---|---|
$font | The font family used for the button. | 'Ubuntu' |
$shadow-raised | The shadow of the button. | hover me 0 2px 4px -1px rgba(0, 0, 0, .2), 0 3px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12); |
$bold-font-weight | The bold font weight of the button. | 500 |