Close button

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

Code

Certara UI

Toggle dark mode

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

certara-close-button

Properties

Property	Attribute	Description	Type	Default
disabled	disabled		boolean	false
inverse	inverse		boolean	false
label	label		string	'Close'

Events

Event	Description	Type
certaraClick		CustomEvent<any>

Dependencies

Used by

• certara-alert
• certara-modal

Graph

graph TD;
  certara-alert --> certara-close-button
  certara-modal --> certara-close-button
  style certara-close-button fill:#f9f,stroke:#333,stroke-width:4px

---

HTML

Toggle dark mode

<button type="button" class="btn--close" aria-label="Close"></button>

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