OLYSENSE Design System

For a full list of available icons, refer to the icon page .

Default

Primary

Secondary

Ghost

Primary Destructive

Secondary Destructive

Ghost Destructive

<div ods-layout="block gap:sm">
  <div ods-layout="inline gap:sm">
    <ods-icon-button name='kudo-classification' label='classification'>Default</ods-icon-button>
    <ods-icon-button name='kudo-classification' variant='primary' label='classification'>Primary</ods-icon-button>
    <ods-icon-button name='kudo-classification' variant='secondary' label='classification'>Secondary</ods-icon-button>
    <ods-icon-button name='kudo-classification' variant='ghost' label='classification'>Ghost</ods-icon-button>
  </div>

  <div ods-layout="inline gap:sm">
    <ods-icon-button name='trash' variant='primary-destructive' label='classification'>Primary Destructive</ods-icon-button>
    <ods-icon-button name='trash' variant='secondary-destructive' label='classification'>Secondary Destructive</ods-icon-button>
    <ods-icon-button name='trash' variant='ghost-destructive' label='classification'>Ghost Destructive</ods-icon-button>
  </div>
</div>

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

export const Example = () => {
  return (
    <div className='flex gap-8'>
      <div ods-layout="block gap:sm">
        <div ods-layout="inline gap:sm">
          <OdsIconButton name='kudo-classification' label='classification'>Default</OdsIconButton>
          <OdsIconButton name='kudo-classification' label='classification' variant='primary'>Primary</OdsIconButton>
          <OdsIconButton name='kudo-classification' label='classification' variant='secondary'>Secondary</OdsIconButton>
          <OdsIconButton name='kudo-classification' label='classification' variant='ghost'>Ghost</OdsIconButton>
        </div>

        <div ods-layout="inline gap:sm">
          <OdsIconButton name='trash' label='classification' variant='primary-destructive'>Primary Destructive</OdsIconButton>
          <OdsIconButton name='trash' label='classification' variant='secondary-destructive'>Secondary Destructive</OdsIconButton>
          <OdsIconButton name='trash' label='classification' variant='ghost-destructive'>Ghost Destructive</OdsIconButton>
        </div>
      </div>

    </div>
  )
}

export default Example;

Small

Medium

Large

<div class='flex gap-8'>
  <ods-icon-button name='kudo-classification' label='classification' size="small">Small</ods-icon-button>
  <ods-icon-button name='kudo-classification' label='classification' size="medium">Medium</ods-icon-button>
  <ods-icon-button name='kudo-classification' label='classification' size="large">Large</ods-icon-button>
</div>

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

const Example = () => {
  return (
    <div className='flex gap-8'>
      <OdsIconButton name='kudo-classification' label='classification' size="small">Small</OdsIconButton>
      <OdsIconButton name='kudo-classification' label='classification' size="medium">Medium</OdsIconButton>
      <OdsIconButton name='kudo-classification' label='classification' size="large">Large</OdsIconButton>
    </div>
  )
}

export default Example;

Use the disabled attribute to disable the icon button.

Primary

Secondary

Ghost

Primary Destructive

Secondary Destructive

Ghost Destructive

<div ods-layout="block gap:sm">
  <div ods-layout="inline gap:sm">
    <ods-icon-button name='kudo-classification' variant='primary' label='classification' disabled>Primary</ods-icon-button>
    <ods-icon-button name='kudo-classification' variant='secondary' label='classification' disabled>Secondary</ods-icon-button>
    <ods-icon-button name='kudo-classification' variant='ghost' label='classification' disabled>Ghost</ods-icon-button>
  </div>

  <div ods-layout="inline gap:sm">
    <ods-icon-button name='trash' variant='primary-destructive' label='classification' disabled>Primary Destructive</ods-icon-button>
    <ods-icon-button name='trash' variant='secondary-destructive' label='classification' disabled>Secondary Destructive</ods-icon-button>
    <ods-icon-button name='trash' variant='ghost-destructive' label='classification' disabled>Ghost Destructive</ods-icon-button>
  </div>
</div>

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

export const Example = () => {
  return (
    <div className='flex gap-8'>
      <div ods-layout="block gap:sm">
        <div ods-layout="inline gap:sm">
          <OdsIconButton name='kudo-classification' variant='primary' label='classification' disabled>Primary</OdsIconButton>
          <OdsIconButton name='kudo-classification' variant='secondary' label='classification' disabled>Secondary</OdsIconButton>
          <OdsIconButton name='kudo-classification' variant='ghost' label='classification' disabled>Ghost</OdsIconButton>
        </div>

        <div ods-layout="inline gap:sm">
          <OdsIconButton name='trash' variant='primary-destructive' label='classification' disabled>Primary Destructive</OdsIconButton>
          <OdsIconButton name='trash' variant='secondary-destructive' label='classification' disabled>Secondary Destructive</OdsIconButton>
          <OdsIconButton name='trash' variant='ghost-destructive' label='classification' disabled>Ghost Destructive</OdsIconButton>
        </div>
      </div>

    </div>
  )
}

export default Example;

Use the href attribute to convert the button to a link.

Link

<div class='flex gap-8'>
  <ods-icon-button name='kudo-classification' label='classification' href="https://example.com" target="_blank">Link</ods-icon-button>
</div>

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

const Example = () => {
  return (
    <div className='flex gap-8'>
      <OdsIconButton name='kudo-classification' label='classification' href="https://example.com" target="_blank">Link</OdsIconButton>
    </div>
  )
}

export default Example;

Event handlers for clicks and other user actions can be registered as you would on a standard button element (or the React equivalent ).

Default

<ods-icon-button name='kudo-classification' id="button-example">Default</ods-icon-button>

<script>
  const button = document.getElementById('button-example');

  const onClickHandler = () => {
    alert('Test button clicked!');
  };

  button.addEventListener('click', onClickHandler);
</script>

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

export const Example = () => {
  const onClickHandler = () => {
    alert('Test button clicked!');
  };

  return (
    <OdsIconButton name='kudo-classification' onClick={onClickHandler}>Default</OdsIconButton>
  )
}

export default Example;

Importing

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

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.

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
name	string \| undefined
library	string \| undefined
src	string \| undefined
href	string \| undefined
target	'_blank' \| '_parent' \| '_self' \| '_top' \| undefined
download	string \| undefined
label	string	''
disabled	boolean	false
variant	'default' \| 'primary' \| 'secondary' \| 'ghost' \| 'primary-destructive' \| 'secondary-destructive' \| 'ghost-destructive' \| 'application-bar'	'default'
size	'small' \| 'medium' \| 'large'	'medium'

Events

React Event	Description	Event Detail
ods-blur	Emitted when the icon button loses focus.	--
ods-focus	Emitted when the icon button gains focus.	--

Methods

Name	Description	Arguments
click()	Simulates a click on the icon button.	--
focus()	Sets focus on the icon button.	--
blur()	Removes focus from the icon button.	--

Parts

Name	Description
base	The component's base wrapper.

Dependencies

This component automatically imports the following dependencies.

ods-icon

Icon Buttons

Examples

Variants

Size

Disabled