Icon buttons

Icon buttons (like Buttons) let users take action. Used for repeated or persistent actions on a page or toolbar, they lack visible labels to simplify the UI.

Code

Variants

Certara UI

Toggle dark mode

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

certara-button

Properties

Property	Attribute	Description	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

---

HTML

Toggle dark mode

<button type="button" class="btn-icon btn-icon--brand" aria-label="" title="">…</button>

NameContextClassCopy

1. Brand
   Light
   .btn-icon—brand
   btn-icon--brandCopy to Clipboard
2. Neutral
   Light
   .btn-icon—neutral
   btn-icon--neutralCopy to Clipboard
3. Inverse
   Dark
   .btn-icon—inverse
   btn-icon--inverseCopy to Clipboard
4. Danger
   Light
   .btn-icon—danger
   btn-icon--dangerCopy to Clipboard
5. Success
   Light
   .btn-icon—success
   btn-icon--successCopy to Clipboard

Selected State

Certara UI

3

Toggle dark mode

<certara-button variant="icon" color="brand" inner-class-name="btn-icon--active" aria-label="">…</certara-button>

HTML

3

Toggle dark mode

<button type="button" class="btn-icon btn-icon--brand btn-icon--active" aria-label="">…</button>

In Practice

Increase clarity

Include a Tooltip to help any users who may be unfamiliar with the icon.

Accessibility

Screen reader support

Set the aria-label HTML attribute to its action (e.g., “Next”, “Delete”, “Resolve”, etc.). Learn about aria-labels.

Design resources

View component in Figma