Interactive button or link component. Renders as a semantic `<button>` or `<a>` element depending on whether the `href`...

Interactive button or link component. Renders as a semantic `<button>` or `<a>` element depending on whether the `href` property is set. Use buttons for user actions (submit, cancel, delete) and as link buttons for navigation when a button-like appearance is needed. Supports multiple style variants, sizes, icon integration, and form association via native ElementInternals API.

<ed-button></ed-button>

Properties

Name Type Default Description
text String string Interactive button or link component. Renders as a semantic `<button>` or `<a>` element depending on whether the `href` property is set. Use buttons for user actions (submit, cancel, delete) and as link buttons for navigation when a button-like appearance is needed. Supports multiple style variants, sizes, icon integration, and form association via native ElementInternals API. / export class EdButton extends EdFormElement { static formAssociated = true; static get styles() { return unsafeCSS(styles); } /** The button text. Can be overridden by slot content.
variant String 'primary' | 'danger' | 'bare' | 'link' Style variant <ed-text-passage size="sm"> <ul> <li>**primary** Primary call-to-action — submit, save, confirm</li> <li>**danger** Destructive or irreversible actions — delete, remove, cancel</li> <li>**bare** Minimal emphasis for secondary actions or dense interfaces</li> <li>**link** Tertiary actions styled as inline text links</li> </ul> </ed-text-passage>
disabled Boolean boolean Disabled attribute
target String '_blank' | '_self' | '_parent' | '_top' Target attribute for a link (i.e. set to _blank to open in new tab) - **_blank** yields a link that opens in a new tab - **_self** yields a link that loads the URL into the same browsing context as the current one. This is the default behavior - **_parent** yields a link that loads the URL into the parent browsing context of the current one. If there is no parent, this behaves the same way as _self - **_top** yields a link that loads the URL into the top-level browsing context. If there is no parent, this behaves the same way as _self.
strong Boolean boolean Strong variation for dark backgrounds
href String string URL if this is an <a> element - this swaps <button> for <a>
iconName String string Icon name
iconPosition String 'top' | 'before' | 'after' = undefined Icon position <ed-text-passage size="sm"> <ul> <li>**top** places the icon on top of the button text</li> <li>**before** places the icon before the button text</li> <li>**after** places the icon after the button text</li> </ul> </ed-text-passage>
size String 'sm' | 'lg' Size variant <ed-text-passage size="sm"> <ul> <li>**sm** shrinks the button typography and overall size</li> <li>**lg** increases the button typography size and overall size</li> </ul> </ed-text-passage>
hideText Boolean boolean Visually hide button text (but text is still accessible to assistive technology) 1) Use this for icon-only buttons for accessibility
fullWidth Boolean false Full width button
round Boolean false Round button
type String 'button' | 'submit' | 'reset' = 'button' What type of button is this. Defaults to 'button'

Slots

Name Description
- Optional default slot for button text (alternative to the `text` property)

Interactive Documentation

Full interactive examples, variant previews, accessibility audits, and the complete API reference are available in Storybook — generated directly from the component source code.

Source

packages/eddie-web-components/components/button/button.ts