eds-button

Explore the Interactive Component

Use the playground below to experiment with the component. Click the button to view the full Storybook deployment for additional examples and configurations.

See It in Use with Code

Check out the practical implementations of component.

Using Property Binding

In frameworks like React or Angular, you can take advantage of property binding:

In React

In Vue

Overview

EdsButton - Updated for EBRAINS Visual System 2025

A versatile button component designed for a range of actions and interactions. Updated to match the new EBRAINS visual identity with:

Brand black (#07140D) for primary buttons
Brand green (#00FF9D) for accents and focus states
Pill-shaped design (rounded-full by default)
IBM Plex Sans typography
High-contrast accessibility

Key features:

Primary (black) and Secondary (outlined) button styles
Loading state indicator with proper color handling
Disabled state for control over user interactions
Optional icon display with customizable position and size
Support for different element types (button or a)
Emits custom Matomo event when clicked for tracking

Properties

Property	Attribute	Description	Type	Default
`ariaLabel`	`aria-label`	The accessible aria-label for the button, used when there is no visible label. Default is “Button” to ensure icon-only buttons are announced properly.	`string`	`'Button'`
`disabled`	`disabled`	A boolean indicating whether the button is disabled.	`boolean`	`false`
`elementType`	`element-type`	The HTML element type for the button (e.g., ‘button’, ‘a’). Default is ‘button’.	`"a" \| "button"`	`'button'`
`fullWidth`	`full-width`	Whether the button should take the full width of its container.	`boolean`	`false`
`icon`	`icon`	The icon name to be displayed inside the button.	"copy" \| "arrow-right" \| "chevron-right" \| "chevron-left" \| "chevron-down" \| "chevron-up" \| "arrow-left" \| "arrow-up-right" \| "close" \| "add" \| "edit" \| "checkmark" \| "download" \| "upload" \| "view" \| "exit" \| "caretSort" \| "bookmark" \| "createLink" \| "activity" \| "account" \| "analytics" \| "template" \| "documentExport" \| "documentDownload" \| "trashCan" \| "chooseItem" \| "copyLink" \| "dragHorizontal" \| "dragVertical" \| "login" \| "logout" \| "move" \| "replicate" \| "sortAscending" \| "sortDescending" \| "requestQuote" \| "reset" \| "resultDraft" \| "share" \| "play" \| "book" \| "chatOff" \| "forum" \| "shareKnowledge" \| "time" \| "help" \| "customerService" \| "code" \| "rocket" \| "compass" \| "menu" \| "search" \| "settings" \| "notification" \| "user" \| "group" \| "save" \| "document" \| "folder" \| "image" \| "calendar" \| "information" \| "warning" \| "error" \| "checkmark-filled" \| "star" \| "thumbs-up" \| "thumbs-down" \| "twitter" \| "linkedin" \| "facebook" \| "youtube" \| "mastodon" \| "bluesky"	`undefined`
`iconPos`	`icon-pos`	The position of the icon inside the button. Options are ’left’ or ‘right’. Default is ‘right’.	`"left" \| "right"`	`'right'`
`iconSmall`	`icon-small`	A boolean indicating whether a smaller icon size should be used.	`boolean`	`false`
`intent`	`intent`	The visual intent or style of the button. - ‘primary’: Brand black background with white text - ‘secondary’: Transparent/white background with black border and text - ‘secondaryInverse’: Transparent background with white border and white text (for dark backgrounds) - ‘brand’: Brand green background with black text (CTA style) - ‘cta’: CTA link style with monospace font (gray text that turns green on hover) - ‘cta-brand’: CTA link style with monospace font (always green)	`"brand" \| "brandInverse" \| "cta" \| "cta-brand" \| "ghost" \| "ghostInverse" \| "neutral" \| "primary" \| "secondary" \| "secondaryInverse"`	`'primary'`
`label`	`label`	The label text to be displayed inside the button.	`string`	`undefined`
`loading`	`loading`	A boolean indicating whether the button is in a loading state.	`boolean`	`false`
`pill`	`pill`	A boolean to determine if the button should have a pill shape (rounded-full). Default is true to match new EBRAINS visual system.	`boolean`	`false`
`size`	`size`	The size of the button. Options are ‘small’ or ’large’. Default is ‘small’.	`"large" \| "small"`	`'small'`
`triggerClick`	–	Custom click handler passed to the button.	`() => void`	`undefined`

Dependencies

Used by

Depends on

eds-icon-wrapper

Graph

graph TD;
  eds-button --> eds-icon-wrapper
  eds-alert --> eds-button
  eds-card-cta --> eds-button
  eds-dropdown --> eds-button
  eds-footer --> eds-button
  eds-form --> eds-button
  eds-fullscreen-menu --> eds-button
  eds-header --> eds-button
  eds-matomo-notice --> eds-button
  eds-modal --> eds-button
  eds-nps --> eds-button
  eds-pagination --> eds-button
  eds-rating --> eds-button
  eds-steps --> eds-button
  eds-steps-v2 --> eds-button
  eds-table --> eds-button
  eds-toast --> eds-button
  style eds-button fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS