IconButton

A square button with only an icon, named for screen readers.

icon-button.example.svelte

<script lang="ts">
  import { IconButton } from '@onlywin/ui-svelte';
</script>

<div class="example-row">
  <IconButton icon="settings" label="Settings" />
  <IconButton icon="copy" label="Copy" variant="ghost" />
  <IconButton icon="plus" label="Add game" variant="primary" />
  <IconButton icon="x" label="Close" variant="ghost" size="sm" />
</div>

Usage

Do

Use it in dense toolbars and table rows, where the icon is well known.

Don’t

Do not use an icon the reader has to guess; use a Button with text instead.

Accessibility

label is required: it is the accessible name and the native tooltip.
The icon is hidden from screen readers.

Keyboard

IconButton keyboard interactions
Keys	Action
`Enter, Space`	Activate
`Tab, Shift+Tab`	Move focus in and out

Props

The same props in both frameworks. In React, class is className, events are camelCase (onClick), content passed as Svelte snippets is a ReactNode prop, every bindable value has a default… twin for uncontrolled use, and elementRef reaches the DOM element.

IconButton props
Prop	Type	Default	Description
`class`	`string`	—
`icon` *required	`TUiIconName`	—
`label` *required	`string`	—	The accessible name, also shown as the native tooltip.
`size`	`'lg' \| 'md' \| 'sm'`	`'md'`
`type`	`'button' \| 'reset' \| 'submit'`	`'button'`
`variant`	`'danger' \| 'ghost' \| 'primary' \| 'secondary'`	`'ghost'`