Drawer

Demos

A Drawer is a <dialog> opened via the invoker command API. Trigger it from any button with command='show-modal' and commandfor pointing at the drawer id.

Fullscreen
import { Button, Drawer } from 'marketing-ui'

function Demo() {
  return (
    <>
      <Button
        label='Open drawer'
        command='show-modal'
        commandfor='demo-drawer-right'
      />
      <Drawer
        id='demo-drawer-right'
        orientation='right'
        size='medium'
        closeAriaLabel='Close'
      >
        <div style={{ padding: '1.5rem' }}>
          <h2>Drawer content</h2>
          <p>Any content can be placed inside a drawer.</p>
        </div>
      </Drawer>
    </>
  )
}

export default Demo

Left, big

Fullscreen
import { Button, Drawer } from 'marketing-ui'

function Demo() {
  return (
    <>
      <Button
        label='Open search'
        command='show-modal'
        commandfor='demo-drawer-left'
      />
      <Drawer
        id='demo-drawer-left'
        orientation='left'
        size='big'
        closeAriaLabel='Close'
      >
        <div style={{ padding: '1.5rem' }}>
          <h2>Search</h2>
          <input type='search' placeholder='Search…' />
        </div>
      </Drawer>
    </>
  )
}

export default Demo

Props