Button

Button

Buttons are used to initialize an action, such as submitting a form, cancelling an action, or performing a page specific operation. Buttons can also be used for navigation when styled as a link.

Basic Usage

Default Button

The default button for most actions.

Preview

Code

<script>
    import { Button, InlineStack } from "svelte-polaris";

    function handleClick() {
        console.log("Button clicked");
    }
</script>

<InlineStack gap="200">
    <Button onClick={handleClick} variant="primary">Primary button</Button>
    <Button onClick={handleClick} variant="secondary">Secondary button</Button>
    <Button onClick={handleClick} variant="tertiary">Tertiary button</Button>
    <Button onClick={handleClick} variant="plain">Plain button</Button>
    <Button onClick={handleClick} variant="monochromePlain">Monochrome plain button</Button>
</InlineStack>

Button Tones

Preview

Code

<script>
    import { Button, InlineStack } from "svelte-polaris";
</script>

<InlineStack gap="200">
    <Button variant="primary" tone="critical">Delete account</Button>
    <Button variant="plain" tone="critical">Remove item</Button>
    <Button variant="primary" tone="success">Complete order</Button>
    <Button variant="plain" tone="success">Complete order</Button>
</InlineStack>

Button Sizes

Micro Button

Use micro buttons in tight spaces.

Preview

Code

<script>
    import { Button, InlineStack } from "svelte-polaris";
</script>

<InlineStack gap="200">
    <Button size="micro">Edit</Button>
    <Button size="slim">Edit</Button>
    <Button size="medium">Edit</Button>
    <Button size="large">Edit</Button>
</InlineStack>

Button States

Disabled State

Disabled buttons indicate that an action is not currently available.

<script>
  import { Button } from 'svelte-polaris';
</script>

<Button disabled>
  Unavailable action
</Button>

<Button variant="primary" disabled>
  Submit (disabled)
</Button>

Loading State

Loading buttons show progress for asynchronous actions.

<script>
  import { Button } from 'svelte-polaris';
</script>

<Button loading>
  Processing...
</Button>

<Button variant="primary" loading>
  Saving changes
</Button>

Pressed State

Pressed state indicates that a toggle button is currently active.

<script>
  import { Button } from 'svelte-polaris';
</script>

<Button pressed>
  Active filter
</Button>

<Button variant="tertiary" pressed>
  Bold text
</Button>

Buttons with Icons

Icon Only Button

Use icon-only buttons when space is limited and the icon meaning is clear.

<script>
  import { Button } from 'svelte-polaris';
  import { SearchIcon, DeleteIcon, EditIcon } from 'svelte-polaris/icons';
</script>

<Button accessibilityLabel="Search" icon={SearchIcon} />
<Button accessibilityLabel="Delete" icon={DeleteIcon} tone="critical" />
<Button accessibilityLabel="Edit" icon={EditIcon} variant="plain" />

Button with Icon and Text

Combine icons with text to provide both visual and textual context.

<script>
  import { Button } from 'svelte-polaris';
  import { PlusIcon, SaveIcon, ExportIcon } from 'svelte-polaris/icons';
</script>

<Button icon={PlusIcon}>
  Add product
</Button>

<Button icon={SaveIcon} variant="primary">
  Save changes
</Button>

<Button icon={ExportIcon} variant="tertiary">
  Export data
</Button>

Button with Disclosure

Disclosure buttons indicate that clicking will reveal additional options.

<script>
  import { Button } from 'svelte-polaris';
</script>

<!-- Default down disclosure -->
<Button disclosure>
  More actions
</Button>

<!-- Up disclosure -->
<Button disclosure="up">
  Show less
</Button>

<!-- Select disclosure -->
<Button disclosure="select">
  Choose option
</Button>

Layout Options

Full Width Button

Full width buttons span the entire width of their container.

<script>
  import { Button } from 'svelte-polaris';
</script>

<Button fullWidth>
  Full width button
</Button>

<Button fullWidth variant="primary">
  Primary full width
</Button>

Text Alignment

Control how text is aligned within the button.

<script>
  import { Button } from 'svelte-polaris';
</script>

<Button fullWidth textAlign="left">
  Left aligned
</Button>

<Button fullWidth textAlign="center">
  Center aligned
</Button>

<Button fullWidth textAlign="right">
  Right aligned
</Button>

Link Buttons

Buttons can also function as links when a URL is provided.

<script>
  import { Button } from 'svelte-polaris';
</script>

<!-- Internal link -->
<Button url="/products">
  View products
</Button>

<!-- External link -->
<Button url="https://shopify.com" external>
  Visit Shopify
</Button>

<!-- Download link -->
<Button url="/report.pdf" download>
  Download report
</Button>

Props

Prop	Type	Default	Description
variant	'plain' | 'primary' | 'secondary' | 'tertiary' | 'monochromePlain'	'secondary'	Changes the visual appearance of the button
tone	'critical' | 'success'	-	Sets the color treatment of the button
size	'micro' | 'slim' | 'medium' | 'large'	'medium'	Changes the size of the button
textAlign	'left' | 'right' | 'center' | 'start' | 'end'	'start'	Changes the inner text alignment
fullWidth	boolean	false	Allows the button to grow to the width of its container
disabled	boolean	false	Disables the button
loading	boolean	false	Shows loading state with spinner
pressed	boolean	false	Indicates the pressed state for toggle buttons
disclosure	'down' | 'up' | 'select' | boolean	false	Displays the button with a disclosure icon
icon	IconSource	-	Icon to display to the left of the button content
url	string	-	A destination to link to, rendered in the href attribute of a link
external	boolean	false	Forces url to open in a new tab
download	boolean | string	false	Tells the browser to download the url instead of opening it
accessibilityLabel	string	-	Visually hidden text for screen readers
onClick	() => void	-	Callback when button is clicked

Accessibility

• Always provide descriptive text or accessibilityLabel for screen readers
• Use semantic tone props to convey meaning (critical for destructive actions)
• Ensure sufficient color contrast for all button variants
• Consider focus states and keyboard navigation
• For icon-only buttons, always include accessibilityLabel

Best Practices

Use primary buttons sparingly

Only one primary button per page section to maintain clear hierarchy.

Choose appropriate variants

Match the visual weight to the action importance.

Provide clear labels

Button text should clearly describe the action that will occur.

Consider loading states

Always show progress for async actions to provide user feedback.

Related Components

• ButtonGroup - For grouping related buttons
• Link - For navigation that doesn’t trigger actions
• ActionList - For lists of actions in menus