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