OLYSENSE Design System

Left

Center

Right

<ods-button-group label="Alignment">
  <ods-button>Left</ods-button>
  <ods-button>Center</ods-button>
  <ods-button>Right</ods-button>
</ods-button-group>

import { OdsButtonGroup } from '@ods/components/react.button-group';
import { OdsButton } from '@ods/components/react.button';

const Example = () => {
  return (
    <OdsButtonGroup label="Alignment">
      <OdsButton>Left</OdsButton>
      <OdsButton>Center</OdsButton>
      <OdsButton>Right</OdsButton>
    </OdsButtonGroup>
  )
}

export default Example;

Left

Center

Right

Left

Center

Right

Left

Center

Right

<ods-button-group label="Alignment">
  <ods-button size='small'>Left</ods-button>
  <ods-button size='small'>Center</ods-button>
  <ods-button size='small'>Right</ods-button>
</ods-button-group>

<br /><br />

<ods-button-group label="Alignment">
  <ods-button size='medium'>Left</ods-button>
  <ods-button size='medium'>Center</ods-button>
  <ods-button size='medium'>Right</ods-button>
</ods-button-group>

<br /><br />

<ods-button-group label="Alignment">
  <ods-button size='large'>Left</ods-button>
  <ods-button size='large'>Center</ods-button>
  <ods-button size='large'>Right</ods-button>
</ods-button-group>

import { OdsButtonGroup } from '@ods/components/react.button-group';
import { OdsButton } from '@ods/components/react.button';

const Example = () => {
  return (
    <>
      <OdsButtonGroup label="Alignment">
        <OdsButton size='small'>Left</OdsButton>
        <OdsButton size='small'>Center</OdsButton>
        <OdsButton size='small'>Right</OdsButton>
      </OdsButtonGroup>

      <br /><br />

      <OdsButtonGroup label="Alignment">
        <OdsButton size='medium'>Left</OdsButton>
        <OdsButton size='medium'>Center</OdsButton>
        <OdsButton size='medium'>Right</OdsButton>
      </OdsButtonGroup>

      <br /><br />

      <OdsButtonGroup label="Alignment">
        <OdsButton size='large'>Left</OdsButton>
        <OdsButton size='large'>Center</OdsButton>
        <OdsButton size='large'>Right</OdsButton>
      </OdsButtonGroup>
    </>
  )
}

export default Example;

Top

Middle

Bottom

<ods-button-group direction="vertical" label="Alignment">
  <ods-button>Top</ods-button>
  <ods-button>Middle</ods-button>
  <ods-button>Bottom</ods-button>
</ods-button-group>

import { OdsButtonGroup } from '@ods/components/react.button-group';
import { OdsButton } from '@ods/components/react.button';

const Example = () => {
  return (
    <OdsButtonGroup direction='vertical' label="Alignment">
      <OdsButton>Top</OdsButton>
      <OdsButton>Middle</OdsButton>
      <OdsButton>Bottom</OdsButton>
    </OdsButtonGroup>
  )
}

export default Example;

<ods-button-group label="Alignment">
  <ods-icon-button name='close' label='close'></ods-icon-button>
  <ods-icon-button name='triangle-right' label='triangle-right'></ods-icon-button>
</ods-button-group>

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

const Example = () => {
  return (
    <OdsButtonGroup label="Alignment">
      <OdsIconButton name='close' label='close'></OdsIconButton>
      <OdsIconButton name='triangle-right' label='triangle-right'></OdsIconButton>
    </OdsButtonGroup>
  )
}

export default Example;

Add

Cut

Copy

Paste

<ods-button-group label="Alignment">
  <ods-button>Add</ods-button>

  <ods-dropdown placement="bottom-end">
    <ods-button slot="trigger" caret></ods-button>
    <ods-menu>
      <ods-menu-item value="cut">Cut</ods-menu-item>
      <ods-menu-item value="copy">Copy</ods-menu-item>
      <ods-menu-item value="paste">Paste</ods-menu-item>
    </ods-menu>
  </ods-dropdown>

</ods-button-group>

import { OdsButtonGroup } from '@ods/components/react.button-group';
import { OdsButton } from '@ods/components/react.button';
import { OdsDropdown } from '@ods/components/react.dropdown';
import { OdsMenu } from '@ods/components/react.menu';
import { OdsMenuItem } from '@ods/components/react.menu-item';

const Example = () => {
  return (
    <OdsButtonGroup label="Alignment">
      <OdsButton>Add</OdsButton>
      <OdsDropdown placement="bottom-end">
        <OdsButton slot="trigger" caret></OdsButton>
        <OdsMenu>
          <OdsMenuItem value="cut">Cut</OdsMenuItem>
          <OdsMenuItem value="copy">Copy</OdsMenuItem>
          <OdsMenuItem value="paste">Paste</OdsMenuItem>
        </OdsMenu>
      </OdsDropdown>
    </OdsButtonGroup>
  )
}

export default Example;

Importing

import '@ods/components/web.button-group';

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)	One or more `<ods-button>`, `<ods-icon-button>`, or `<ods-segmented-item>` elements to display in the button group.

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
disableRole	boolean	false
label	string	''
direction	'horizontal' \| 'vertical'	'horizontal'
gap	boolean	false

Parts

Name	Description
base	The component's base wrapper.

Button Group

Examples

Standard

Sizes

Vertical Layout

Icon Only

Split Button

Importing

Slots

Properties

Parts