OLYSENSE Design System

Custom Content

An Popover showing custom content built using an OdsIconButton and custom content.

<ods-popover>
  <ods-icon-button slot="trigger" name='kudo-classification' variant='primary' label='classification'></ods-icon-button>
  <div class="popover__panel">
    Showing some popover content
  </div>
</ods-popover>

<style>
  .popover__panel {
    padding: var(--ods-sys-space-16);
    border: 1px solid var(--ods-sys-color-outline-base);
    background-color: var(--ods-sys-color-surface-container);
    border-radius: var(--ods-sys-border-radius-md);
  }
</style>

import { OdsPopover } from '@ods/components/react.popover';
import { OdsIconButton } from '@ods/components/react.icon-button';

const css = `
  /* Only used for documentation */
  .popover__panel {
    padding: var(--ods-sys-space-16);
    border: 1px solid var(--ods-sys-color-outline-base);
    background-color: var(--ods-sys-color-surface-container);
    border-radius: var(--ods-sys-border-radius-md);
  }
`;

const Example = () => {
  return (
    <>
      <OdsPopover>
        <OdsIconButton slot='trigger' name='kudo-classification' variant='primary' label='classification'>Show Content</OdsIconButton>
        <div className='popover__panel'>
          Showing some popover content
        </div>
      </OdsPopover>

      <style>{css}</style>
    </>
  )
}

export default Example;

An Actions Menu built using an OdsButton and OdsMenu.

<ods-popover id="popover-example">
  <ods-icon-button slot="trigger" name='more-horiz' label='Actions Menu'></ods-icon-button>
  <ods-menu>
    <ods-menu-item value="Save">Save</ods-menu-item>
    <ods-menu-item value="Edit">Edit</ods-menu-item>
    <ods-divider></ods-divider>
    <ods-menu-item value="delete">Delete</ods-menu-item>
  </ods-menu>
</ods-popover>

<script>
  const popoverActionMenuExample = document.getElementById('popover-example');
  const popoverActionMenuTigger = document.getElementById('popover-tigger');

  const onPopoverActionMenuSelectHandler = (event) => {
    const selectedItem = event.detail.item;
    popoverActionMenuTigger.innerText = selectedItem.value;
  };

  popoverActionMenuExample.addEventListener('ods-select', event => onPopoverActionMenuSelectHandler(event));
</script>

<style>
  .popover__panel {
    padding: var(--ods-sys-space-16);
    border: 1px solid var(--ods-sys-color-outline-base);
    background-color: var(--ods-sys-color-surface-container);
    border-radius: var(--ods-sys-border-radius-md);
  }
</style>

import { useState } from 'react';
import { OdsPopover } from '@ods/components/react.popover';
import { OdsIconButton } from '@ods/components/react.icon-button';
import { OdsMenu } from '@ods/components/react.menu';
import { OdsMenuItem } from '@ods/components/react.menu-item';
import { OdsDivider } from '@ods/components/react.divider';
import { OdsSelectEvent } from '@ods/components/react';

const css = `
  /* Only used for documentation */
  .trigger-button::part(base) {
    /* width: 200px; */
  }
`;

const Example = () => {
  const onSelectHandler = (event: OdsSelectEvent) => {
    const selectedItem = event.detail.item.value;

    alert(`Menu item "${selectedItem}" selected.`);
  };

  return (
    <>
      <OdsPopover>
        <OdsIconButton slot='trigger' name='more-horiz' label='Action Menu'></OdsIconButton>
        <OdsMenu onOdsSelect={onSelectHandler}>
          <OdsMenuItem value="add">Add</OdsMenuItem>
          <OdsMenuItem value="edit">Edit</OdsMenuItem>
          <OdsDivider></OdsDivider>
          <OdsMenuItem value="delete">Delete</OdsMenuItem>
        </OdsMenu>
      </OdsPopover>

       <style>{css}</style>
    </>
  )
}

export default Example;

A Calendar Presets Menu configured using OdsPopover, OdsButton and OdsMenu. When the menu item is selected, the label on the OdsButton is updated with the value defined in the menu item.

<ods-popover id="button-trigger-example">
  <ods-button id='popover-tigger' slot="trigger" caret>This week</ods-button>
  <ods-menu>
    <ods-menu-item menu-item-label="This week" value="This week" menu-item-sublabel="25 Aug 2025 - Today"></ods-menu-item>
    <ods-menu-item menu-item-label="This week" value="Previous week" menu-item-sublabel="18 Aug 2025 - 25 Aug 2025"></ods-menu-item>
    <ods-menu-item menu-item-label="Previous month" value="Previous month" menu-item-sublabel="1 Jul 2025 - 31 Jul 2025"></ods-menu-item>
    <ods-menu-item menu-item-label="Previous 3 months" value="Previous 3 months" menu-item-sublabel="1 May 2025 - 31 Jul 2025"></ods-menu-item>
    <ods-menu-item menu-item-label="Previous 6 months" value="Previous 6 months" menu-item-sublabel="1 Feb 2025 - 31 Jul 2025"></ods-menu-item>
    <ods-menu-item menu-item-label="Previous 12 months" value="Previous 12 months" menu-item-sublabel="1 Jul 2024 - 31 Jul 2025"></ods-menu-item>
  </ods-menu>
</ods-popover>

<script>
  const popoverButtonTriggerExample = document.getElementById('button-trigger-example');
  const popoverButtonTigger = document.getElementById('popover-tigger');

  const onPopoverTriggerSelectHandler = (event) => {
    const selectedItem = event.detail.item;
    popoverButtonTigger.innerText = selectedItem.value;
  };

  popoverButtonTriggerExample.addEventListener('ods-select', event => onPopoverTriggerSelectHandler(event));
</script>

<style>
  .popover__panel {
    padding: var(--ods-sys-space-16);
    border: 1px solid var(--ods-sys-color-outline-base);
    background-color: var(--ods-sys-color-surface-container);
    border-radius: var(--ods-sys-border-radius-md);
  }
</style>

import { useState } from 'react';
import { OdsPopover } from '@ods/components/react.popover';
import { OdsButton } from '@ods/components/react.button';
import { OdsMenu } from '@ods/components/react.menu';
import { OdsMenuItem } from '@ods/components/react.menu-item';
import { OdsSelectEvent } from '@ods/components/react';

const css = `
  /* Only used for documentation */
  .trigger-button::part(base) {
    /* width: 200px; */
  }
`;

const Example = () => {
  const [ triggerLabel, setTriggerLabel ] = useState('This week');

  const onSelectHandler = (event: OdsSelectEvent) => {
    const selectedItem = event.detail.item.value;

    setTriggerLabel(selectedItem);
  };

  return (
    <>
      <OdsPopover stayOpenOnSelect>
        <OdsButton className="trigger-button" slot='trigger' caret>{triggerLabel}</OdsButton>
        <OdsMenu onOdsSelect={onSelectHandler}>
          <OdsMenuItem menu-item-label="This week" value="This week" menu-item-sublabel="25 Aug 2025 - Today"></OdsMenuItem>
          <OdsMenuItem menu-item-label="This week" value="Previous week" menu-item-sublabel="18 Aug 2025 - 25 Aug 2025"></OdsMenuItem>
          <OdsMenuItem menu-item-label="Previous month" value="Previous month" menu-item-sublabel="1 Jul 2025 - 31 Jul 2025"></OdsMenuItem>
          <OdsMenuItem menu-item-label="Previous 3 months" value="Previous 3 months" menu-item-sublabel="1 May 2025 - 31 Jul 2025"></OdsMenuItem>
          <OdsMenuItem menu-item-label="Previous 6 months" value="Previous 6 months" menu-item-sublabel="1 Feb 2025 - 31 Jul 2025"></OdsMenuItem>
          <OdsMenuItem menu-item-label="Previous 12 months" value="Previous 12 months" menu-item-sublabel="1 Jul 2024 - 31 Jul 2025"></OdsMenuItem>
        </OdsMenu>
      </OdsPopover>

       <style>{css}</style>
    </>
  )
}

export default Example;

Button

Buttons are used for interface actions. Primary style should be used only once per section for main call-to-action, while other styles can appear more frequently.

Learn More

Icon Button

Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.

Learn More

Menus provide a list of options for the user to choose from.

Learn More

Importing

import '@ods/components/web.popover';

Note: You only need to import a web component once in your code, as it registers itself globally when defined, allowing you to use it anywhere within your application without needing to re-import it each time you want to use the component.

Slots

Name	Description
(default)	The popover's main content.
trigger	The popover's trigger, usually a `<ods-button>` element.

Properties

Please note, both DOM properties and HTML attributes are shown in the table below. Unless otherwise specified, the property and attribute names are identical.

Property/Attribute	Type	Default
open	boolean	false
arrow	boolean	false
placement	\| 'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'right' \| 'right-start' \| 'right-end' \| 'left' \| 'left-start' \| 'left-end'	'bottom-start'
disabled	boolean	false
stayOpenOnSelect stay-open-on-select	boolean	false
distance	number	8
skidding	number	0
hoist	boolean	false
sync	'width' \| 'height' \| 'both' \| undefined	undefined

Events

React Event	Description	Event Detail
ods-show	Emitted when the popover opens.	--
ods-after-show	Emitted after the popover opens and all animations are complete.	--
ods-hide	Emitted when the popover closes.	--
ods-after-hide	Emitted after the popover closes and all animations are complete.	--

Methods

Name	Description	Arguments
show()	Shows the popover panel.	--
hide()	Hides the popover panel	--
reposition()	Instructs the popover menu to reposition. Useful when the position or size of the trigger changes when the menu is activated.	--

Parts

Name	Description
base	The component's base wrapper.
trigger	The container that wraps the trigger.
panel	The panel that gets shown when the popover is open.

Dependencies

This component automatically imports the following dependencies.

ods-popup

Popover

Examples

Custom Content

Actions Menu

Calendar Presets Menu

Associated Components

Importing

Slots

Properties

Events

Methods

Parts

Dependencies