Button

<oblyx-button> renders a native <button>, or an <a> when href is set. It carries its own visual style, size, elevation, disabled and loading states as plain attributes, and participates in native form submission the same way a hand-written <button> would.

<oblyx-button>Save</oblyx-button>

oblyxButton { +"Save" }

Variants

Four visual styles. secondary is the default; use primary for the one dominant action on a screen and destructive for actions that delete or revoke something.

<oblyx-button variant="primary">Save</oblyx-button>
<oblyx-button variant="secondary">Save</oblyx-button>
<oblyx-button variant="ghost">Save</oblyx-button>
<oblyx-button variant="destructive">Delete account</oblyx-button>

oblyxButton(variant = OblyxButtonVariant.PRIMARY) { +"Save" }
oblyxButton(variant = OblyxButtonVariant.SECONDARY) { +"Save" }
oblyxButton(variant = OblyxButtonVariant.GHOST) { +"Save" }
oblyxButton(variant = OblyxButtonVariant.DESTRUCTIVE) { +"Delete account" }

Sizes

<oblyx-button size="sm">Small</oblyx-button>
<oblyx-button size="md">Medium</oblyx-button>
<oblyx-button size="lg">Large</oblyx-button>

oblyxButton(size = OblyxButtonSize.SM) { +"Small" }
oblyxButton(size = OblyxButtonSize.MD) { +"Medium" }
oblyxButton(size = OblyxButtonSize.LG) { +"Large" }

Elevation

A resting shadow depth for a button that floats above the page, such as a mobile action button. Most buttons in normal document flow stay at the default, none.

<oblyx-button elevation="none">None</oblyx-button>
<oblyx-button elevation="low">Low</oblyx-button>
<oblyx-button elevation="med">Med</oblyx-button>
<oblyx-button elevation="high">High</oblyx-button>

oblyxButton(elevation = OblyxButtonElevation.NONE) { +"None" }
oblyxButton(elevation = OblyxButtonElevation.LOW) { +"Low" }
oblyxButton(elevation = OblyxButtonElevation.MED) { +"Med" }
oblyxButton(elevation = OblyxButtonElevation.HIGH) { +"High" }

Disabled and loading

disabled blocks interaction and native form submission, the same as a plain <button disabled>. loading shows a spinner in place of the visible content and sets aria-busy; by default it also blocks interaction, so pass label alongside it. The button's visible content is hidden from assistive tech while loading, and label is what re-asserts its accessible name in that state.

<oblyx-button disabled>Save</oblyx-button>

oblyxButton(disabled = true) { +"Save" }

<oblyx-button loading label="Save">Save</oblyx-button>

oblyxButton(loading = true, label = "Save") { +"Save" }

Set interruptible to keep a loading button clickable: the spinner and aria-busy still apply, but the button stays interactive. Use this for actions a user can reasonably cancel or repeat mid-flight, not for a fire-once submit, save, or pay button.

<oblyx-button loading interruptible label="Uploading">Uploading</oblyx-button>

oblyxButton(loading = true, interruptible = true, label = "Uploading") { +"Uploading" }

Icon-only buttons

Set icon-only for a square, icon-only button. There is no icon attribute and no slot to distinguish icon content from labeled content: the button's content is whatever markup the caller puts inside it, icon included, so icon-only declares intent explicitly, and label is required as the sole accessible name. Omitting label on an icon-only button logs a console error rather than rendering silently wrong.

<oblyx-button icon-only label="Close">
  <oblyx-icon name="close"></oblyx-icon>
</oblyx-button>

oblyxButton(iconOnly = true, label = "Close") {
  oblyxIcon(name = OblyxIconName.CLOSE)
}

Link buttons

Setting href renders an <a> styled as a button instead of a <button>. This only happens while the button is interactive: a disabled or non-interruptible-loading button always renders as a real <button>, even with href set, because a disabled link is an accessibility anti-pattern and neither state can be represented on an <a>.

<oblyx-button href="/docs/" variant="secondary">Read the docs</oblyx-button>

oblyxButton(href = "/docs/", variant = OblyxButtonVariant.SECONDARY) { +"Read the docs" }

<oblyx-button href="/docs/" disabled>Read the docs</oblyx-button>

oblyxButton(href = "/docs/", disabled = true) { +"Read the docs" }

Type and form submission

Oblyx does not port Astryx's default of overriding type to "button". Leave type unset and <oblyx-button> renders no type attribute on its inner <button> at all, so the browser's own default applies: inside a <form>, that default is submit. A button you meant as a plain action button, placed inside a form with no explicit type, will submit that form. This is standard native <button> behavior, not an Oblyx quirk, but it surprises anyone coming from Astryx or another library that changed the default.

<form onsubmit="event.preventDefault(); this.querySelector('output').textContent = 'Form submitted.';">
  <oblyx-button>Save</oblyx-button>
  <output></output>
</form>

form {
  oblyxButton { +"Save" }
}

Pass type="button" explicitly on anything that must not submit, the same way you would on a plain HTML button.

<form onsubmit="event.preventDefault(); this.querySelector('output').textContent = 'Form submitted.';">
  <oblyx-button type="button">Cancel</oblyx-button>
  <output></output>
</form>

form {
  oblyxButton(type = OblyxButtonType.BUTTON) { +"Cancel" }
}

Reference