Skip to main content

Button

A custom button web component for BIM applications. HTML tag: bim-button

Fires​

click - Fired when the button is clicked.

Extends​

  • LitElement

Properties​

active​

active: boolean = false

A boolean attribute which, if present, indicates that the button is active.

Default​

false

Examples​

<bim-button label="Click me" active></bim-button>
const button = document.createElement('bim-button');
         button.label = 'Click me';
         button.active = true;

disabled​

disabled: boolean = false

A boolean attribute which, if present, indicates that the button is disabled.

Default​

false

Examples​

<bim-button label="Click me" disabled></bim-button>
const button = document.createElement('bim-button');
         button.label = 'Click me';
         button.disabled = true;

icon?​

optional icon: string

The icon to be displayed on the button.

Default​

undefined

Examples​

<bim-button icon="my-icon"></bim-button>
const button = document.createElement('bim-button');
         button.icon = 'my-icon';

label?​

optional label: string

The label to be displayed on the button.

Default​

undefined

Examples​

<bim-button label="Click me"></bim-button>
const button = document.createElement('bim-button');
         button.label = 'Click me';

labelHidden​

labelHidden: boolean = false

A boolean attribute which, if present, indicates that the label should be hidden.

Default​

false

Examples​

<bim-button label="Click me" label-hidden></bim-button>
const button = document.createElement('bim-button');
         button.label = 'Click me';
         button.labelHidden = true;

tooltipText?​

optional tooltipText: string

The text of the tooltip to be displayed when hovering over the button.

Default​

undefined

Examples​

<bim-button label="Click me" tooltip-text="This is a tooltip"></bim-button>
const button = document.createElement('bim-button');
         button.label = 'Click me';
         button.tooltipText = 'This is a tooltip';

tooltipTime?​

optional tooltipTime: number

The time (in milliseconds) to wait before showing the tooltip when hovering over the button.

Default​

700

Examples​

<bim-button label="Click me" tooltip-time="1000"></bim-button>
const button = document.createElement('bim-button');
         button.label = 'Click me';
         button.tooltipTime = 1000;

tooltipTitle?​

optional tooltipTitle: string

The title of the tooltip to be displayed when hovering over the button.

Default​

undefined

Examples​

<bim-button label="Click me" tooltip-title="Button Tooltip"></bim-button>
const button = document.createElement('bim-button');
         button.label = 'Click me';
         button.tooltipTitle = 'Button Tooltip';

tooltipVisible​

tooltipVisible: boolean = false

A boolean attribute which, if present, indicates that the tooltip should be visible.

Default​

false

Examples​

<bim-button label="Click me" tooltip-visible></bim-button>
const button = document.createElement('bim-button');
         button.label = 'Click me';
         button.tooltipVisible = true;

vertical​

vertical: boolean = false

A boolean attribute which, if present, indicates that the button should be displayed vertically.

Default​

false

Examples​

<bim-button label="Click me" vertical></bim-button>
const button = document.createElement('bim-button');
         button.label = 'Click me';
         button.vertical = true;

styles​

static styles: CSSResult

CSS styles for the component.

Overrides​

LitElement.styles

Accessors​

loading​

set loading(value): void

Attribute to set the loading state of the button. When the loading state is set to true, the button is disabled and the icon is changed to a loading spinner. When the loading state is set to false, the button is reverted to its previous state.

Parameters​

ParameterType
valueboolean