Button

Show design guidelines

Code

Framework HTML React Angular

Variants

Solid

BrandSecondaryDangerSuccessInverse

Toggle dark mode

<certara-button color="brand">Brand</certara-button>
<certara-button color="secondary">Secondary</certara-button>
<certara-button color="danger">Danger</certara-button>
<certara-button color="success">Success</certara-button>
<certara-button color="inverse">Inverse</certara-button>

import { CertaraButton } from '@certara/certara-ui-react';

<CertaraButton color="brand">Brand</CertaraButton>
<CertaraButton color="secondary">Secondary</CertaraButton>
<CertaraButton color="danger">Danger</CertaraButton>
<CertaraButton color="success">Success</CertaraButton>
<CertaraButton color="inverse">Inverse</CertaraButton>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-button color="brand">Brand</certara-button>
<certara-button color="secondary">Secondary</certara-button>
<certara-button color="danger">Danger</certara-button>
<certara-button color="success">Success</certara-button>
<certara-button color="inverse">Inverse</certara-button>

Outline

Brand Neutral Danger Success

Inverse

Toggle dark mode

<certara-button color="brand" variant="outline">Brand</certara-button>
<certara-button color="neutral" variant="outline">Neutral</certara-button>
<certara-button color="danger" variant="outline">Danger</certara-button>
<certara-button color="success" variant="outline">Success</certara-button>
<div class="bg-inverse p-4">
  <certara-button color="inverse" variant="outline">Inverse</certara-button>
</div>

import { CertaraButton } from '@certara/certara-ui-react';

<CertaraButton color="brand" variant="outline">Brand</CertaraButton>
<CertaraButton color="neutral" variant="outline">Neutral</CertaraButton>
<CertaraButton color="danger" variant="outline">Danger</CertaraButton>
<CertaraButton color="success" variant="outline">Success</CertaraButton>
<div className="bg-inverse p-4">
  <CertaraButton color="inverse" variant="outline">Inverse</CertaraButton>
</div>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-button color="brand" variant="outline">Brand</certara-button>
<certara-button color="neutral" variant="outline">Neutral</certara-button>
<certara-button color="danger" variant="outline">Danger</certara-button>
<certara-button color="success" variant="outline">Success</certara-button>
<div class="bg-inverse p-4">
  <certara-button color="inverse" variant="outline">Inverse</certara-button>
</div>

Link buttons

Has dimensions of a normal button (padding, border-radius)

Link

Toggle dark mode

<certara-button variant="link">Link</certara-button>

import { CertaraButton } from '@certara/certara-ui-react';

<CertaraButton variant="link">Link</CertaraButton>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-button variant="link">Link</certara-button>

Reset styles

Removes default button styles

Reset

Toggle dark mode

<certara-button variant="reset">Reset</certara-button>

import { CertaraButton } from '@certara/certara-ui-react';

<CertaraButton variant="reset">Reset</CertaraButton>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-button variant="reset">Reset</certara-button>

Additional sizing

(Note: Works on solid, outline, and link buttons)

Framework HTML React Angular

Small

Small button

Toggle dark mode

<certara-button color="brand" size="sm">Small button</certara-button>

import { CertaraButton } from '@certara/certara-ui-react';

<CertaraButton color="brand" size="sm">Small button</CertaraButton>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-button color="brand" size="sm">Small button</certara-button>

Large

Large button

Toggle dark mode

<certara-button color="brand" size="lg">Large button</certara-button>

import { CertaraButton } from '@certara/certara-ui-react';

<CertaraButton color="brand" size="lg">Large button</CertaraButton>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-button color="brand" size="lg">Large button</certara-button>

Icons

(Note: Works on solid, outline, and link buttons)

Framework HTML React Angular

Left

Icon on left

Toggle dark mode

<certara-button left-icon="plus">Icon on left</certara-button>

import { CertaraButton } from '@certara/certara-ui-react';

<CertaraButton leftIcon="plus">Icon on left</CertaraButton>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-button left-icon="plus">Icon on left</certara-button>

Right

Icon on right

Toggle dark mode

<certara-button right-icon="arrow-right">Icon on right</certara-button>

import { CertaraButton } from '@certara/certara-ui-react';

<CertaraButton rightIcon="arrow-right">Icon on right</CertaraButton>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-button right-icon="arrow-right">Icon on right</certara-button>

Both

Icon on both

Toggle dark mode

<certara-button left-icon="plus" right-icon="arrow-right">Icon on both</certara-button>

import { CertaraButton } from '@certara/certara-ui-react';

<CertaraButton leftIcon="plus" rightIcon="arrow-right">Icon on both</CertaraButton>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-button left-icon="plus" right-icon="arrow-right">Icon on both</certara-button>

Custom icons

Custom icons

Toggle dark mode

<certara-button>
  <certara-icon name="plus" variant="light" role="presentation"></certara-icon>
  Custom icons
  <certara-icon name="arrow-right" variant="solid" role="presentation"></certara-icon>
</certara-button>

import { CertaraButton, CertaraIcon } from '@certara/certara-ui-react';

<CertaraButton>
  <CertaraIcon name="plus" variant="light" role="presentation" />
  Custom icons
  <CertaraIcon name="arrow-right" variant="solid" role="presentation" />
</CertaraButton>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-button>
  <certara-icon name="plus" variant="light" role="presentation"></certara-icon>
  Custom icons
  <certara-icon name="arrow-right" variant="solid" role="presentation"></certara-icon>
</certara-button>

Links

<certara-button> can also render as a hyperlink by giving it an href and make use of all the pre-built advantages like copying URLs, opening in new tabs, etc. Or, just maintain the appearance of a hyperlink. As always, use the right semantics for the situation when choosing between buttons and links.

Framework HTML React Angular

Button appears as link

Has dimensions of a link (inline, no padding)

Link Brand Danger Success

Inverse

Toggle dark mode

<certara-button variant="reset" inner-class-name="link">Link</certara-button>
<certara-button variant="reset" inner-class-name="link text-brand">Brand</certara-button>
<certara-button variant="reset" inner-class-name="link text-danger">Danger</certara-button>
<certara-button variant="reset" inner-class-name="link text-success">Success</certara-button>
<div class="bg-inverse p-4">
  <certara-button variant="reset" inner-class-name="link text-inverse">Inverse</certara-button>
</div>

import { CertaraButton } from '@certara/certara-ui-react';

<CertaraButton variant="reset" innerClassName="link">Link</CertaraButton>
<CertaraButton variant="reset" innerClassName="link text-brand">Brand</CertaraButton>
<CertaraButton variant="reset" innerClassName="link text-danger">Danger</CertaraButton>
<CertaraButton variant="reset" innerClassName="link text-success">Success</CertaraButton>
<div className="bg-inverse p-4">
  <CertaraButton variant="reset" innerClassName="link text-inverse">Inverse</CertaraButton>
</div>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-button variant="reset" inner-class-name="link">Link</certara-button>
<certara-button variant="reset" inner-class-name="link text-brand">Brand</certara-button>
<certara-button variant="reset" inner-class-name="link text-danger">Danger</certara-button>
<certara-button variant="reset" inner-class-name="link text-success">Success</certara-button>
<div class="bg-inverse p-4">
  <certara-button variant="reset" inner-class-name="link text-inverse">Inverse</certara-button>
</div>

Link appears as button

Renders as a hyperlink with the appearance of a button

Brand Secondary Danger Success Inverse

Toggle dark mode

<certara-button href="#" target="_blank" right-icon="arrow-up-right-from-square" color="brand">
  Brand
</certara-button>
<certara-button href="#" target="_blank" right-icon="arrow-up-right-from-square" color="secondary">
  Secondary
</certara-button>
<certara-button href="#" target="_blank" right-icon="arrow-up-right-from-square" color="danger">
  Danger
</certara-button>
<certara-button href="#" target="_blank" right-icon="arrow-up-right-from-square" color="success">
  Success
</certara-button>
<certara-button href="#" target="_blank" right-icon="arrow-up-right-from-square" color="inverse">
  Inverse
</certara-button>

import { CertaraButton } from '@certara/certara-ui-react';

<CertaraButton href="#" target="_blank" rightIcon="arrow-up-right-from-square" color="brand">
  Brand
</CertaraButton>
<CertaraButton href="#" target="_blank" rightIcon="arrow-up-right-from-square" color="secondary">
  Secondary
</CertaraButton>
<CertaraButton href="#" target="_blank" rightIcon="arrow-up-right-from-square" color="danger">
  Danger
</CertaraButton>
<CertaraButton href="#" target="_blank" rightIcon="arrow-up-right-from-square" color="success">
  Success
</CertaraButton>
<CertaraButton href="#" target="_blank" rightIcon="arrow-up-right-from-square" color="inverse">
  Inverse
</CertaraButton>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-button href="#" target="_blank" right-icon="arrow-up-right-from-square" color="brand">
  Brand
</certara-button>
<certara-button href="#" target="_blank" right-icon="arrow-up-right-from-square" color="secondary">
  Secondary
</certara-button>
<certara-button href="#" target="_blank" right-icon="arrow-up-right-from-square" color="danger">
  Danger
</certara-button>
<certara-button href="#" target="_blank" right-icon="arrow-up-right-from-square" color="success">
  Success
</certara-button>
<certara-button href="#" target="_blank" right-icon="arrow-up-right-from-square" color="inverse">
  Inverse
</certara-button>

Color modifiers (deprecated)

You can eschew the use of certara-button in favor of a simple button with a class="link". Use Text color utilities to effect color variances.

LinkBrandDangerSuccess

Inverse

Toggle dark mode

<button class="link">Link</button>
<button class="link text-brand">Brand</button>
<button class="link text-danger">Danger</button>
<button class="link text-success">Success</button>
<div class="bg-inverse p-4">
  <button class="link text-inverse">Inverse</button>
</div>

<button className="link">Link</button>
<button className="link text-brand">Brand</button>
<button className="link text-danger">Danger</button>
<button className="link text-success">Success</button>
<div className="bg-inverse p-4">
  <button className="link text-inverse">Inverse</button>
</div>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<button class="link">Link</button>
<button class="link text-brand">Brand</button>
<button class="link text-danger">Danger</button>
<button class="link text-success">Success</button>
<div class="bg-inverse p-4">
  <button class="link text-inverse">Inverse</button>
</div>

Icon buttons

Framework HTML React Angular

Circle

Toggle dark mode

<certara-button variant="icon" color="brand" aria-label="Move right">
  <certara-icon name="arrow-right" />
</certara-button>
<certara-button variant="icon" color="neutral" aria-label="Move right">
  <certara-icon name="arrow-right" />
</certara-button>
<div class="bg-inverse p-4">
  <certara-button variant="icon" color="inverse" aria-label="Move right">
    <certara-icon name="arrow-right" />
  </certara-button>
</div>
<certara-button variant="icon" color="danger" aria-label="Delete">
  <certara-icon name="trash" />
</certara-button>
<certara-button variant="icon" color="success" aria-label="Checked">
  <certara-icon name="circle-check" />
</certara-button>

import { CertaraButton, CertaraIcon } from '@certara/certara-ui-react';

<CertaraButton variant="icon" color="brand" aria-label="Move right">
  <CertaraIcon name="arrow-right" />
</CertaraButton>
<CertaraButton variant="icon" color="neutral" aria-label="Move right">
  <CertaraIcon name="arrow-right" />
</CertaraButton>
<div className="bg-inverse p-4">
  <CertaraButton variant="icon" color="inverse" aria-label="Move right">
    <CertaraIcon name="arrow-right" />
  </CertaraButton>
</div>
<CertaraButton variant="icon" color="danger" aria-label="Delete">
  <CertaraIcon name="trash" />
</CertaraButton>
<CertaraButton variant="icon" color="success" aria-label="Checked">
  <CertaraIcon name="circle-check" />
</CertaraButton>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-button variant="icon" color="brand" aria-label="Move right">
  <certara-icon name="arrow-right"></certara-icon>
</certara-button>
<certara-button variant="icon" color="neutral" aria-label="Move right">
  <certara-icon name="arrow-right"></certara-icon>
</certara-button>
<div class="bg-inverse p-4">
  <certara-button variant="icon" color="inverse" aria-label="Move right">
    <certara-icon name="arrow-right"></certara-icon>
  </certara-button>
</div>
<certara-button variant="icon" color="danger" aria-label="Delete">
  <certara-icon name="trash"></certara-icon>
</certara-button>
<certara-button variant="icon" color="success" aria-label="Checked">
  <certara-icon name="circle-check"></certara-icon>
</certara-button>

Rounded

Toggle dark mode

<certara-button variant="icon-rounded" color="brand" aria-label="Move right">
  <certara-icon name="arrow-right" />
</certara-button>
<certara-button variant="icon-rounded" color="neutral" aria-label="Move right">
  <certara-icon name="arrow-right" />
</certara-button>
<div class="bg-inverse p-4">
  <certara-button variant="icon-rounded" color="inverse" aria-label="Move right">
    <certara-icon name="arrow-right" />
  </certara-button>
</div>
<certara-button variant="icon-rounded" color="danger" aria-label="Delete">
  <certara-icon name="trash" />
</certara-button>
<certara-button variant="icon-rounded" color="success" aria-label="Checked">
  <certara-icon name="circle-check" />
</certara-button>

import { CertaraButton, CertaraIcon } from '@certara/certara-ui-react';

<CertaraButton variant="icon-rounded" color="brand" aria-label="Move right">
  <CertaraIcon name="arrow-right" />
</CertaraButton>
<CertaraButton variant="icon-rounded" color="neutral" aria-label="Move right">
  <CertaraIcon name="arrow-right" />
</CertaraButton>
<div className="bg-inverse p-4">
  <CertaraButton variant="icon-rounded" color="inverse" aria-label="Move right">
    <CertaraIcon name="arrow-right" />
  </CertaraButton>
</div>
<CertaraButton variant="icon-rounded" color="danger" aria-label="Delete">
  <CertaraIcon name="trash" />
</CertaraButton>
<CertaraButton variant="icon-rounded" color="success" aria-label="Checked">
  <CertaraIcon name="circle-check" />
</CertaraButton>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-button variant="icon-rounded" color="brand" aria-label="Move right">
  <certara-icon name="arrow-right"></certara-icon>
</certara-button>
<certara-button variant="icon-rounded" color="neutral" aria-label="Move right">
  <certara-icon name="arrow-right"></certara-icon>
</certara-button>
<div class="bg-inverse p-4">
  <certara-button variant="icon-rounded" color="inverse" aria-label="Move right">
    <certara-icon name="arrow-right"></certara-icon>
  </certara-button>
</div>
<certara-button variant="icon-rounded" color="danger" aria-label="Delete">
  <certara-icon name="trash"></certara-icon>
</certara-button>
<certara-button variant="icon-rounded" color="success" aria-label="Checked">
  <certara-icon name="circle-check"></certara-icon>
</certara-button>

States

Framework HTML React Angular

Selected

Only icon buttons support a selected state

Toggle dark mode

<certara-button selected variant="icon" color="brand" aria-label="Move right">
  <certara-icon name="arrow-right" />
</certara-button>
<certara-button selected variant="icon" color="success" aria-label="Checked">
  <certara-icon name="circle-check" variant="solid" />
</certara-button>
<certara-button selected variant="icon-rounded" color="brand" aria-label="Bold">
  <certara-icon name="bold" variant="solid" />
</certara-button>

import { CertaraButton, CertaraIcon } from '@certara/certara-ui-react';

<CertaraButton selected variant="icon" color="brand" aria-label="Move right">
  <CertaraIcon name="arrow-right" />
</CertaraButton>
<CertaraButton selected variant="icon" color="success" aria-label="Checked">
  <CertaraIcon name="circle-check" variant="solid" />
</CertaraButton>
<CertaraButton selected variant="icon-rounded" color="brand" aria-label="Bold">
  <CertaraIcon name="bold" variant="solid" />
</CertaraButton>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-button selected variant="icon" color="brand" aria-label="Move right">
  <certara-icon name="arrow-right"></certara-icon>
</certara-button>
<certara-button selected variant="icon" color="success" aria-label="Checked">
  <certara-icon name="circle-check" variant="solid"></certara-icon>
</certara-button>
<certara-button selected variant="icon-rounded" color="brand" aria-label="Bold">
  <certara-icon name="bold" variant="solid"></certara-icon>
</certara-button>

Disabled

Brand Outline Link

Toggle dark mode

<certara-button disabled>Brand</certara-button>
<certara-button disabled variant="outline">Outline</certara-button>
<certara-button disabled variant="link">Link</certara-button>
<certara-button disabled variant="outline" color="success" selected aria-label="Checked">
  <certara-icon name="circle-check" variant="solid" />
</certara-button>
<certara-button disabled variant="icon-rounded" color="brand" selected aria-label="Bold">
  <certara-icon name="bold" variant="solid" />
</certara-button>

import { CertaraButton, CertaraIcon } from '@certara/certara-ui-react';

<CertaraButton disabled>Brand</CertaraButton>
<CertaraButton disabled variant="outline">Outline</CertaraButton>
<CertaraButton disabled variant="link">Link</CertaraButton>
<CertaraButton disabled variant="outline" color="success" selected aria-label="Checked">
  <CertaraIcon name="circle-check" variant="solid" />
</CertaraButton>
<CertaraButton disabled variant="icon-rounded" color="brand" selected aria-label="Bold">
  <CertaraIcon name="bold" variant="solid" />
</CertaraButton>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-button disabled>Brand</certara-button>
<certara-button disabled variant="outline">Outline</certara-button>
<certara-button disabled variant="link">Link</certara-button>
<certara-button disabled variant="outline" color="success" selected aria-label="Checked">
  <certara-icon name="circle-check" variant="solid"></certara-icon>
</certara-button>
<certara-button disabled variant="icon-rounded" color="brand" selected aria-label="Bold">
  <certara-icon name="bold" variant="solid"></certara-icon>
</certara-button>

Loading

Loading...

Toggle dark mode

<certara-button show-loader>Loading...</certara-button>

import { CertaraButton } from '@certara/certara-ui-react';

<CertaraButton showLoader>Loading...</CertaraButton>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-button show-loader>Loading...</certara-button>

Button groups

Framework HTML React Angular

Button Group

Button Button Button Button

Toggle dark mode

<div class="btn-group" role="group">
  <certara-button color="secondary">Button</certara-button>
  <certara-button color="secondary">Button</certara-button>
  <certara-button color="secondary">Button</certara-button>
  <certara-button color="secondary">Button</certara-button>
</div>

import { CertaraButton } from '@certara/certara-ui-react';

<div className="btn-group" role="group">
  <CertaraButton color="secondary">Button</CertaraButton>
  <CertaraButton color="secondary">Button</CertaraButton>
  <CertaraButton color="secondary">Button</CertaraButton>
  <CertaraButton color="secondary">Button</CertaraButton>
</div>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<div class="btn-group" role="group">
  <certara-button color="secondary">Button</certara-button>
  <certara-button color="secondary">Button</certara-button>
  <certara-button color="secondary">Button</certara-button>
  <certara-button color="secondary">Button</certara-button>
</div>

certara-button

Properties

block

Attribute	block
Type	boolean
Default	false
Required	false
Description	When true, button spans full width

color

Attribute	color
Type	"brand" | "danger" | "inverse" | "neutral" | "secondary" | "success"
Default	'brand'
Required	false
Description	Color options for buttons

configAria

Attribute	config-aria
Type	any
Default	{}
Required	false
Description	ARIA overrides merged onto the inner element; reflected and mutable

disabled

Attribute	disabled
Type	boolean
Default	false
Required	false
Description	Disables the control

href

Attribute	href
Type	string
Default	undefined
Required	false
Description	When set, renders as anchor with this href instead of button

innerClassName

Attribute	inner-class-name
Type	string
Default	undefined
Required	false
Description	CSS classes applied to the inner button or anchor

leftIcon

Attribute	left-icon
Type	string
Default	undefined
Required	false
Description	Icon name to appear on the left

popoverTarget

Attribute	popover-target
Type	string
Default	undefined
Required	false
Description	ID of popover element to control (Popover API)

popoverTargetAction

Attribute	popover-target-action
Type	"hide" | "show" | "toggle"
Default	undefined
Required	false
Description	Popover action

rightIcon

Attribute	right-icon
Type	string
Default	undefined
Required	false
Description	Icon name to appear on the right

selected

Attribute	selected
Type	boolean
Default	false
Required	false
Description	When true, button is selected

showLoader

Attribute	show-loader
Type	boolean
Default	false
Required	false
Description	When true, shows spinner and disables interaction

size

Attribute	size
Type	"lg" | "md" | "sm"
Default	'md'
Required	false
Description	Visual size of button

target

Attribute	target
Type	"_blank" | "_parent" | "_self" | "_top" | "_unfencedTop"
Default	undefined
Required	false
Description	Link target when href is set

type

Attribute	type
Type	"button" | "reset" | "submit"
Default	'button'
Required	false
Description	Native button type

variant

Attribute	variant
Type	"default" | "icon" | "icon-rounded" | "link" | "outline" | "reset"
Default	'default'
Required	false
Description	Visual style options for buttons

Events

Name	Description	Bubbles
certaraBlur	Emitted when the inner element loses focus	true
certaraClick	Emitted on click when not disabled and not loading; detail includes element (host)	true
certaraFocus	Emitted when the inner element receives focus	true