OLYSENSE Design System

Default

Primary

Secondary

Ghost

Primary Destructive

Secondary Destructive

Ghost Destructive

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

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

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

export const Example = () => {
  return (
    <div ods-layout="block gap:sm">
      <div ods-layout="inline gap:sm">
        <OdsButton>Default</OdsButton>
        <OdsButton variant='primary'>Primary</OdsButton>
        <OdsButton variant='secondary'>Secondary</OdsButton>
        <OdsButton variant='ghost'>Ghost</OdsButton>
      </div>

      <div ods-layout="inline gap:sm">
        <OdsButton variant='primary-destructive'>Primary Destructive</OdsButton>
        <OdsButton variant='secondary-destructive'>Secondary Destructive</OdsButton>
        <OdsButton variant='ghost-destructive'>Ghost Destructive</OdsButton>
      </div>
    </div>
  )
}

export default Example;

Small

Medium

Large

<div class='flex gap-16'>
  <ods-button variant="primary" size="small">Small</ods-button>
  <ods-button variant="primary" size="medium">Medium</ods-button>
  <ods-button variant="primary" size="large">Large</ods-button>
</div>

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

const Example = () => {
  return (
    <div className='flex gap-16'>
      <OdsButton variant="primary" size="small">Small</OdsButton>
      <OdsButton variant="primary" size="medium">Medium</OdsButton>
      <OdsButton variant="primary" size="large">Large</OdsButton>
    </div>
  )
}

export default Example;

Primary

Delete

<div class='flex gap-16'>
  <ods-button variant='primary'><ods-icon name="plus-circle-filled" slot='prefix'></ods-icon>Primary</ods-button>
  <ods-button variant='secondary'><ods-icon name="plus-circle" slot='prefix'></ods-icon>Primary<ods-icon name="chevron-right" slot='suffix'></ods-icon></ods-button>
  <ods-button variant='primary-destructive'><ods-icon name="trash" slot='suffix'></ods-icon>Delete</ods-button>
  <ods-button variant='secondary-destructive'><ods-icon name="trash" slot='suffix'></ods-icon>Delete</ods-button>
  <ods-button variant='ghost'><ods-icon name="chevron-right" slot='suffix'></ods-icon>Next</ods-button>
</div>

import { OdsButton } from '@ods/components/react.button';
import { OdsIcon } from '@ods/components/react.icon';

const Example = () => {
  return (
    <div className='flex gap-16'>
      <OdsButton variant='primary'>
        <OdsIcon name="plus-circle-filled" slot='prefix'></OdsIcon>
        Primary
      </OdsButton>

      <OdsButton variant='secondary'>
        <OdsIcon name="plus-circle" slot='prefix'></OdsIcon>
        Primary
        <OdsIcon name="chevron-right" slot='suffix'></OdsIcon>
      </OdsButton>

      <OdsButton variant='primary-destructive'>
        <OdsIcon name="trash" slot='suffix'></OdsIcon>
        Delete
      </OdsButton>

      <OdsButton variant='secondary-destructive'>
        <OdsIcon name="trash" slot='suffix'></OdsIcon>
        Delete
      </OdsButton>

      <OdsButton variant='ghost'>
        <OdsIcon name="chevron-right" slot='suffix'></OdsIcon>
        Next
      </OdsButton>
    </div>
  )
}

export default Example;

Stretch

<ods-button variant="primary" stretch>Stretch</ods-button>

Use the disabled attribute to disable the button.

Default

Primary

Secondary

Ghost

Primary Destructive

Secondary Destructive

Ghost Destructive

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

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

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

export const Example = () => {
  return (
    <div ods-layout="block gap:sm">
      <div ods-layout="inline gap:sm">
        <OdsButton variant='primary' disabled>Primary</OdsButton>
        <OdsButton variant='secondary' disabled>Secondary</OdsButton>
        <OdsButton variant='ghost' disabled>Ghost</OdsButton>
      </div>

      <div ods-layout="inline gap:sm">
        <OdsButton variant='primary-destructive' disabled>Primary Destructive</OdsButton>
        <OdsButton variant='secondary-destructive' disabled>Secondary Destructive</OdsButton>
        <OdsButton variant='ghost-destructive' disabled>Ghost Destructive</OdsButton>
      </div>
    </div>
  )
}

export default Example;

Use the default state of the button along with the caret attribute to add a dropdown indicator when a button will trigger a dropdown, menu, or popover. You can see a fully functional dropdown component here .

Button

<ods-button caret>Button</ods-button>

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-button id="button-example">Default</ods-button>

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

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

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

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

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

  return (
    <OdsButton onClick={onClickHandler}>Default</OdsButton>
  )
}

export default Example;

Importing

import '@ods/components/web.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.

Slots

Name	Description
(default)	The button's label.
prefix	A presentational prefix icon or similar element.
suffix	A presentational suffix icon or similar 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
title	string	''
variant	'default' \| 'primary' \| 'secondary' \| 'ghost' \| 'primary-destructive' \| 'secondary-destructive' \| 'ghost-destructive' \| 'application-bar'	'default'
size	'small' \| 'medium' \| 'large'	'medium'
caret	boolean	false
stretch	true \| false	false
disabled	boolean	false
type	'button' \| 'submit' \| 'reset'	'button'
name	string	''
value	string	''
href	string	''
target	'_blank' \| '_parent' \| '_self' \| '_top'
rel	string	'noreferrer noopener'
download	string \| undefined
form	string
formAction formaction	string
formEnctype formenctype	'application/x-www-form-urlencoded' \| 'multipart/form-data' \| 'text/plain'
formMethod formmethod	'post' \| 'get'
formNoValidate formnovalidate	boolean
formTarget formtarget	'_self' \| '_blank' \| '_parent' \| '_top' \| string
validity
validationMessage

Events

React Event	Description	Event Detail
ods-blur	Emitted when the button loses focus.	--
ods-focus	Emitted when the button gains focus.	--
ods-invalid	Emitted when the form control has been checked for validity and its constraints aren't satisfied.	--

Methods

Name	Description	Arguments
click()	Simulates a click on the button.	--
focus()	Sets focus on the button.	--
blur()	Removes focus from the button.	--
checkValidity()	Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.	--
getForm()	Gets the associated form, if one exists.	--
reportValidity()	Checks for validity and shows the browser's validation message if the control is invalid.	--
setCustomValidity()	Sets a custom validation message. Pass an empty string to restore validity.	--

Parts

Name	Description
base	The component's base wrapper.
prefix	The container that wraps the prefix.
label	The button's label.
suffix	The container that wraps the suffix.
caret	The button's caret icon, an `<ods-icon>` element.

Dependencies

This component automatically imports the following dependencies.

ods-icon

To ensure buttons are visually accessible, any button text must pass 4.5:1 and icons must pass 3:1 contrast against their background in all interactive states. As long as text and icons within buttons meet the contrast requirement, there’s no contrast requirement for the button stroke.

Disabled buttons aren’t interactive and don’t need to pass color contrast.

Button

Examples

Variants

Size

Icon

Stretch

Disabled

Caret

Handling An Event

Importing

Slots

Properties

Events

Methods

Parts

Dependencies

Design

Anatomy

Accessibility