# Popover

```js
const [show, setShow] = React.useState(false);
<>
  <SilkeButton label="Show modal" onClick={() => setShow(true)} />
  <SilkePopover hide={!show}>
    <SilkeBox bg="neutral-20" pad column>
      <h1> Simple modal example</h1>
      <SilkeButton label="Close" onClick={() => setShow(false)} />
    </SilkeBox>
  </SilkePopover>
</>;
```

## HTML Anchor

```js
const [show, setShow] = React.useState(false);
const [targetOrigin, setTargetOrigin] = React.useState('top-left');
const [anchorOrigin, setAnchorOrigin] = React.useState('bottom-left');
const origins = [
  'top-left',
  'top-center',
  'top-right',
  'center-right',
  'bottom-right',
  'bottom-center',
  'bottom-left',
  'center-left',
  'center-center',
];

const AnchorSelect = ({ header, selected, onSelect }) => (
  <SilkeBox column>
    <h5>{header}</h5>
    {origins.map((o) => (
      <SilkeButton
        key={o}
        label={o}
        kind={o === selected ? 'primary' : 'ghost'}
        onClick={() => onSelect(o)}
      />
    ))}
  </SilkeBox>
);

const ref = React.useRef();
<>
  <SilkeButton ref={ref} label="Show modal" onClick={() => setShow(true)} />

  <SilkePopover
    shadow="level-1"
    hide={!show}
    anchor={ref}
    targetOrigin={targetOrigin}
    anchorOrigin={anchorOrigin}
  >
    <SilkeBox bg="neutral-20" pad column>
      <SilkeBox flex>
        <AnchorSelect header="TargetOrigin" selected={targetOrigin} onSelect={setTargetOrigin} />
        <AnchorSelect header="AnchorOrigin" selected={anchorOrigin} onSelect={setAnchorOrigin} />
      </SilkeBox>
      <SilkeButton label="Close" onClick={() => setShow(false)} />
    </SilkeBox>
  </SilkePopover>
</>;
```

### Match width of the anchor