OLYSENSE Design System

This variant is used within the Application Switcher.

<div ods-layout="inline center gap:lg">
  <ods-admin-button href="/"></ods-admin-button>
  <ods-insights-button href="/about/about-us/"></ods-insights-button>
  <ods-reports-button href="/getting-started/"></ods-reports-button>
  <ods-assetcare-button href="/components/button/"></ods-assetcare-button>
</div>

import { OdsAdminButton } from '@ods/components/react.ods-admin-button';
import { OdsInsightsButton } from '@ods/components/react.ods-insights-button';
import { OdsAssetcareButton } from '@ods/components/react.ods-assetcare-button';
import { OdsReportsButton } from '@ods/components/react.ods-reports-button';

const Example = () => {
  return (
    <div ods-layout="inline center gap:lg">
      <OdsAdminButton href="/about/about-us/"></OdsAdminButton>
      <OdsInsightsButton href="/about/about-us/"></OdsInsightsButton>
      <OdsReportsButton href="/getting-started/"></OdsReportsButton>
      <OdsAssetcareButton href="/components/button/"></OdsAssetcareButton>
    </div>
  )
};

export default Example;

This variant is larger and should be used inline on the OLYSENS landing page.

<div ods-layout="inline center gap:xl">
  <ods-admin-button variant="landing" href="/getting-started/"></ods-admin-button>
  <ods-reports-button variant="landing" href="/getting-started/"></ods-reports-button>
  <ods-insights-button variant="landing" href="/about/about-us/"></ods-insights-button>
  <ods-assetcare-button variant="landing" href="/components/button/"></ods-assetcare-button>
</div>

import { OdsAdminButton } from '@ods/components/react.ods-admin-button';
import { OdsInsightsButton } from '@ods/components/react.ods-insights-button';
import { OdsAssetcareButton } from '@ods/components/react.ods-assetcare-button';
import { OdsReportsButton } from '@ods/components/react.ods-reports-button';

const Example = () => {
  return (
    <div ods-layout="inline center gap:xl">
      <OdsAdminButton variant="landing" href="/about/about-us/"></OdsAdminButton>
      <OdsInsightsButton variant="landing" href="/about/about-us/"></OdsInsightsButton>
      <OdsReportsButton variant="landing" href="/getting-started/"></OdsReportsButton>
      <OdsAssetcareButton variant="landing" href="/components/button/"></OdsAssetcareButton>
    </div>
  )
};

export default Example;

Importing

import '@ods/components/web.application-switcher-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.
app-icon	A presentational application 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
name	string	''
disabled	boolean	false
value	string	''
href	string	''
target	'_blank' \| '_parent' \| '_self' \| '_top'
rel	string	'noreferrer noopener'
variant	'app-switcher' \| 'landing'	'app-switcher'

Events

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

Methods

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

Parts

Name	Description
base	The component's base wrapper.
app-icon	The wrappr container for the app switcher button.
label	The label for the app switcher button

Application Switcher Button

Examples

Application Switcher Variant