Close Button

Design guidelines

Close button

Framework

HTML

React

Angular

Example

Toggle dark mode

<certara-close-button></certara-close-button>

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

<CertaraCloseButton />

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-close-button></certara-close-button>

certara-close-button

Properties

disabled

Attribute	disabled
Type	boolean
Default	false
Required	false
Description	If true, the close button will be disabled

inverse

Attribute	inverse
Type	boolean
Default	false
Required	false
Description	If true, the close button will have the inverse color theme

label

Attribute	label
Type	string
Default	'Close'
Required	false
Description	The accessible label of the close button

Events

Name	Description	Bubbles
certaraClick	Event emitted when the close button is clicked	true

The close button is used inside of other components, like a toast or a modal, for closing or dismissing its parent component.

Design guidelines

Example

Toggle dark mode

Accessibility

Screen reader support

Set the aria-label HTML attribute to “Close”. Learn about aria-labels.

Keyboard navigation

When the component is focused, the Enter or Space key executes the button (closes or dismisses the parent component).

Design resources

View component in Figma