Buttons

Buttons are used to trigger an action or an event. Button labels let the user know what to expect by clearly communicating what selecting the button will do or where it will take them.

Code

Variants

Brand

Secondary

Danger

Success

Inverse

<certara-button color="brand">…</certara-button>

certara-button

Properties

Property	Attribute	Type	Default
`block`	`block`	`boolean`	`false`
`color`	`color`	`"brand" \| "danger" \| "inverse" \| "neutral" \| "secondary" \| "success" \| "warning"`	`'brand'`
`configAria`	`config-aria`	`any`	`{}`
`disabled`	`disabled`	`boolean`	`false`
`href`	`href`	`string`	`undefined`
`innerClassName`	`inner-class-name`	`string`	`undefined`
`leftIcon`	`left-icon`	`string`	`undefined`
`popoverTarget`	`popover-target`	`string`	`undefined`
`popoverTargetAction`	`popover-target-action`	`"hide" \| "show" \| "toggle"`	`undefined`
`rightIcon`	`right-icon`	`string`	`undefined`
`showLoader`	`show-loader`	`boolean`	`false`
`size`	`size`	`"lg" \| "md" \| "sm"`	`'md'`
`target`	`target`	`"_blank" \| "_parent" \| "_self" \| "_top" \| "_unfencedTop"`	`undefined`
`type`	`type`	`"button" \| "reset" \| "submit"`	`'button'`
`variant`	`variant`	`"default" \| "icon" \| "link" \| "outline"`	`'default'`

Events

Event	Description	Type
`certaraBlur`		`CustomEvent<void>`
`certaraClick`		`CustomEvent<any>`
`certaraFocus`		`CustomEvent<void>`

Dependencies

Used by

certara-dropdown

Depends on

certara-icon

Graph

graph TD;
  certara-button --> certara-icon
  certara-dropdown --> certara-button
  style certara-button fill:#f9f,stroke:#333,stroke-width:4px

Stencil provides an API to specify the events a component can emit, and it does so with the Event() decorators. Here’s an example of how to use them:

<script>
const element = document.getElementById('my-button');
element.addEventListener('certaraClick', handleClick);

function handleClick() {
  console.log('Clicked!');
}
</script>

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

function () {
  return (
    <>
      <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>
    </>
  );
}

certara-button

Properties

Property	Attribute	Type	Default
`block`	`block`	`boolean`	`false`
`color`	`color`	`"brand" \| "danger" \| "inverse" \| "neutral" \| "secondary" \| "success" \| "warning"`	`'brand'`
`configAria`	`config-aria`	`any`	`{}`
`disabled`	`disabled`	`boolean`	`false`
`href`	`href`	`string`	`undefined`
`innerClassName`	`inner-class-name`	`string`	`undefined`
`leftIcon`	`left-icon`	`string`	`undefined`
`popoverTarget`	`popover-target`	`string`	`undefined`
`popoverTargetAction`	`popover-target-action`	`"hide" \| "show" \| "toggle"`	`undefined`
`rightIcon`	`right-icon`	`string`	`undefined`
`showLoader`	`show-loader`	`boolean`	`false`
`size`	`size`	`"lg" \| "md" \| "sm"`	`'md'`
`target`	`target`	`"_blank" \| "_parent" \| "_self" \| "_top" \| "_unfencedTop"`	`undefined`
`type`	`type`	`"button" \| "reset" \| "submit"`	`'button'`
`variant`	`variant`	`"default" \| "icon" \| "link" \| "outline"`	`'default'`

Events

Event	Description	Type
`certaraBlur`		`CustomEvent<void>`
`certaraClick`		`CustomEvent<any>`
`certaraFocus`		`CustomEvent<void>`

Dependencies

Used by

certara-dropdown

Depends on

certara-icon

Graph

graph TD;
  certara-button --> certara-icon
  certara-dropdown --> certara-button
  style certara-button fill:#f9f,stroke:#333,stroke-width:4px

Events

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

export function SaveButton(props) {

  async function handleClick() {
    setIsSaving(true);
    await onClick();
    setIsSaving(false);
  }

  function () {
    return (
      <CertaraButton color="brand" onCertaraClick={handleClick}>Brand</CertaraButton>
    );
  }

}

<button class="btn btn--brand">…</button>

Name	Class	Actions
Solid brand	`.btn—brand`
Solid light	`.btn—secondary`
Solid inverse	`.btn—inverse`
Solid danger	`.btn—danger`
Solid success	`.btn—success`
Outline brand	`.btn-outline—brand`
Outline secondary	`.btn-outline—secondary`
Outline danger	`.btn-outline—danger`
Outline success	`.btn-outline—success`
Link button	`.btn-link`

Additional sizing

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

Small
Large

Small button

Certara UI
HTML

Large button

Certara UI
HTML

Icons

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

Icon on left

Icon on right

Icon on both

Custom icons

<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

If you have a <button> that for whatever reason needs to look like a link, eschew the use of <certara-button> in favor of a simple <button> with a class="link". Use Text color utilities to effect color variances.

Buttons as “links”

<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>
<button class="link text-inverse">Inverse</button>

Best Practices

Choosing an icon

For more information, refer to the Icon page.

Hierarchy

When multiple actions/options are needed it is important to distinguish their level of importance. Buttons have three levels of importance (primary, secondary, and tertiary).

The example below shows how to display buttons in order of importance (left to right), and the possible combinations when all three are in use.

Brand as primary

Neutral as secondary

Button link as tertiary

Brand as primary

Brand as secondary

Button link as tertiary

Danger as primary

Neutral as secondary

Button link as tertiary

Brand as primary

Danger as secondary

Button link as tertiary

Content guidelines

Buttons and links

Be clear and predictable for users to anticipate what will happen when they click a button
Lead with strong action verbs that encourage action and provide enough context. Use the {verb}+{noun} format except in common action like Save, Close, Cancel, or OK.
Be scannable: avoid unnecessary words and articles such as the, an, or a.

Accessibility

Buttons vs. links

Generally: links go somewhere while buttons do something.

Links

A link is focusable and can be triggered by the enter key. A link will redirect you to a new page or a section within the same page. In VoiceOver’s rotator, it will also be collected within the “Links” window. A link changes what the URL in the browser points to and then displays that website or file. (If the browser can’t display the file, it gets downloaded)

Buttons

Buttons perform an action and are used for functionality that does not lead a user somewhere else. A button is focusable, too, and can be triggered by the space key. A button will trigger an action like opening or closing something, sending a form, expanding navigation, or show/hide. In most cases JavaScript is used to do this. In VoiceOver’s rotator, it will be collected within the “Form controls” window. Outside of submitting a form, a button is paired with Javascript, and without it, the usefulness of buttons is generally limited.

Accessibility concerns

Buttons and links have two different roles, so assistive technologies announce them differently. Links are announced as “links”, while buttons are announced as “buttons”. Having these different roles means there are different user expectations. Not only that links go somewhere and buttons do something, but also their interactivity:

Links can be activated by pressing the return key only.
Buttons can be activated by pressing return or space.
Screen readers have a function to present a list of links to their users. Buttons cannot be as easily reached.
Buttons use the normal mouse pointer arrow, while links trigger the use of the pointing hand mouse pointer.

Design resources

View component in Figma