Skip to main content
Browse docs

Marwes documentation

Button

Semantic-first action family with a base Button component, visual wrappers, and purpose wrappers for canonical workflows.

What this family solves

Semantic-first action family with a base Button component, visual wrappers, and purpose wrappers for canonical workflows.

Use when

  • The UI needs a canonical action trigger with clear semantic intent.
  • A product flow matches one of the purpose wrappers such as submit, cancel, save, or destructive.
  • The implementation should stay aligned across React, Vue, and Svelte through the shared core contract.

Avoid when

  • A plain navigational link with native link semantics is the better fit than an action button.
  • The design is only trying to mimic a button visually without needing button semantics.
  • The product team cannot explain the action intent clearly enough to choose a stable purpose or action.

Public imports

Choose an adapter in the verified examples. The inventory below reflects each framework package exactly.

React — @marwes-ui/react

Components

Button, CancelButton, CloseButton, ConfirmButton, CopyButton, CreateButton, DestructiveButton, DownloadButton, DropdownButton, EditButton, FilterButton, IconButton, LinkButton, PrimaryButton, RefreshButton, SaveButton, SearchButton, SecondaryButton, SortButton, SubmitButton, SuccessButton, TextButton, UploadButton, VerifyButton

Types

ButtonProps, CancelButtonProps, CloseButtonProps, ConfirmButtonProps, CopyButtonProps, CreateButtonProps, DestructiveButtonProps, DownloadButtonProps, DropdownButtonProps, EditButtonProps, FilterButtonProps, IconButtonProps, LinkButtonProps, PrimaryButtonProps, RefreshButtonProps, SaveButtonProps, SearchButtonProps, SecondaryButtonProps, SortButtonProps, SubmitButtonProps, SuccessButtonProps, TextButtonProps, UploadButtonProps, VerifyButtonProps

Enums

ButtonAction, ButtonSize, ButtonVariant

Vue — @marwes-ui/vue

Components

Button, CancelButton, CloseButton, ConfirmButton, CopyButton, CreateButton, DestructiveButton, DownloadButton, DropdownButton, EditButton, FilterButton, IconButton, LinkButton, PrimaryButton, RefreshButton, SaveButton, SearchButton, SecondaryButton, SortButton, SubmitButton, SuccessButton, TextButton, UploadButton, VerifyButton

Types

ButtonProps, CancelButtonProps, CloseButtonProps, ConfirmButtonProps, CopyButtonProps, CreateButtonProps, DestructiveButtonProps, DownloadButtonProps, DropdownButtonProps, EditButtonProps, FilterButtonProps, IconButtonProps, LinkButtonProps, PrimaryButtonProps, RefreshButtonProps, SaveButtonProps, SearchButtonProps, SecondaryButtonProps, SortButtonProps, SubmitButtonProps, SuccessButtonProps, TextButtonProps, UploadButtonProps, VerifyButtonProps

Enums

ButtonAction, ButtonSize, ButtonVariant

Svelte — @marwes-ui/svelte

Components

Button, CancelButton, CloseButton, ConfirmButton, CopyButton, CreateButton, DestructiveButton, DownloadButton, DropdownButton, EditButton, FilterButton, IconButton, LinkButton, PrimaryButton, RefreshButton, SaveButton, SearchButton, SecondaryButton, SortButton, SubmitButton, SuccessButton, TextButton, UploadButton, VerifyButton

Types

ButtonProps, CancelButtonProps, CloseButtonProps, ConfirmButtonProps, CopyButtonProps, CreateButtonProps, DestructiveButtonProps, DownloadButtonProps, DropdownButtonProps, EditButtonProps, FilterButtonProps, IconButtonProps, LinkButtonProps, PrimaryButtonProps, RefreshButtonProps, SaveButtonProps, SearchButtonProps, SecondaryButtonProps, SortButtonProps, SubmitButtonProps, SuccessButtonProps, TextButtonProps, UploadButtonProps, VerifyButtonProps

Enums

ButtonAction, ButtonSize, ButtonVariant

Verified minimal examples

These examples come from the same fixtures verified by the repository checks.

React

import { Button, ButtonVariant } from "@marwes-ui/react"

export function Example() {
  return (
    <>
      <Button>Label →</Button>
      <Button variant={ButtonVariant.secondary}>Label →</Button>
      <Button variant={ButtonVariant.text}>Label →</Button>
    </>
  )
}

Vue

<script setup lang="ts">
import { Button } from "@marwes-ui/vue"
</script>

<template>
  <Button>Label →</Button>
  <Button variant="secondary">Label →</Button>
  <Button variant="text">Label →</Button>
</template>

Svelte

<script lang="ts">
  import { Button } from "@marwes-ui/svelte"
</script>

<Button>Label →</Button>
<Button variant="secondary">Label →</Button>
<Button variant="text">Label →</Button>

Accessibility requirements

  • Accessible action names: Provide a truthful accessible name and preserve Marwes focus indicators.
  • Keyboard and screen-reader review: Verify keyboard behavior and screen-reader output in the finished product flow.
  • Icon-only controls: Give every icon-only control an accessible name through its public naming prop.
  • Manual review boundary: Product-level choice between navigation links and action buttons.
  • Manual review 2: Cases where a plain inline text link is the more honest UI than a button-family surface.

Theming

Button uses Marwes preset CSS and theme variables. Customize it through the theme passed to MarwesProvider; do not add a second component stylesheet. See the theming guide for configuration and token details.

Resources