Button

Basic button component, an enhanced native <button>.

Types

Button types

DefaultPrimarySuccessWarningDangerText

Example

Sizes

Five sizes

XSSmallMediumLargeXL

Example

size supports five tiers: xs / small / medium (default) / large / xl; invalid values fall back to medium with a warning.

Five sizes · primary

XSSmallMediumLargeXL

Example

Five sizes · icon-only

Example

Disabled & Loading

Disabled and loading states

DisabledLoadingSubmitting

Example

Events

Click event

Click me

Example

Clicking dispatches the oas-click CustomEvent (bubbles + composed); detail.originalEvent is the native MouseEvent.

Icon buttons

icon renders an icon before the text (reusing the oas-icon icon set, IconName); the spacing between the icon and text follows --oas-space-2.

Icon + text

SearchDownloadDeleteNew

Example

Without text, the button becomes an equal-width square and needs an aria-label for an accessible name; when not set explicitly, the icon name is used as a fallback (e.g. icon="close" → aria-label="close"). It is recommended to provide an explicit label.

Icon-only buttons

Example

Block

block makes the button fill the full width of its parent container.

Block buttons

Block buttonDownload

Example

Rounded

round applies a pill radius (--oas-radius-full, falling back to 999px when the token is unavailable).

Rounded buttons

DoneUnsubscribe

Example

Ghost

ghost renders a transparent background with an outline; the outline and text are colored by type and darken on hover.

Ghost buttons

Default ghostPrimary ghostSuccess ghostWarning ghostDanger ghost

Example

API

Attributes

Attribute	Description	Type	Default
block	Fill the full width of the parent container (block level)	boolean	—
disabled	Disabled	boolean	—
ghost	Ghost/outline style: transparent background + outline colored by type, darkens on hover	boolean	—
icon	Icon name (reusing the oas-icon icon set); without text it becomes an equal-width square and uses the icon name as the fallback label	string	—
loading	Loading state	boolean	—
round	Pill radius (--oas-radius-full / 999px)	boolean	—
size	Size: xs / small / medium (default) / large / xl; invalid values fall back to medium with a warning	ButtonSize	medium
type	Type	ButtonType	default

Events

Event	Description
oas-click	Click, detail: { originalEvent }

Slots

Name	Description
default	—