Icon button

Preview

Disabled

Source code

html

<h-icon-button
    :kind="state.kind"
    :disabled="state.disabled"
    @click="click"
    :label="`${state.kind} non-toggleable icon button example`"
>
    <cog/>
</h-icon-button>
<h-icon-button
    :kind="state.kind"
    :disabled="state.disabled"
    toggleable
    :label="`${state.kind} toggleable icon button example`"
>
    <template #unselected><heart-outline/></template>
    <template #selected><heart/></template>
</h-icon-button>

<h-icon-button
    :kind="state.kind"
    :disabled="state.disabled"
    @click="click"
    :label="`${state.kind} non-toggleable icon button example`"
>
    <cog/>
</h-icon-button>
<h-icon-button
    :kind="state.kind"
    :disabled="state.disabled"
    toggleable
    :label="`${state.kind} toggleable icon button example`"
>
    <template #unselected><heart-outline/></template>
    <template #selected><heart/></template>
</h-icon-button>

Icon buttons help people take supplementary actions with a single tap. See the Material 3 documentation on this component.

Props

defineProps<{
  kind?: 'filled' | 'filled-tonal' | 'outlined' | 'standard',
  // The label to use for accessibility.
  label: string
  toggleable?: boolean
  disabled?: boolean
  // Which element to render the button as.
  as?: string | Component
  // What the toggle state defaults to.
  checked?: boolean
  // Whether to disable the tooltip.
  noTooltip?: boolean

  modelValue?: boolean
}>()

defineProps<{
  kind?: 'filled' | 'filled-tonal' | 'outlined' | 'standard',
  // The label to use for accessibility.
  label: string
  toggleable?: boolean
  disabled?: boolean
  // Which element to render the button as.
  as?: string | Component
  // What the toggle state defaults to.
  checked?: boolean
  // Whether to disable the tooltip.
  noTooltip?: boolean

  modelValue?: boolean
}>()

Slots

Default

The default slot is used for the icon in non-toggleable buttons.

`unchecked`

The unchecked slot is used for the icon in toggleable buttons when they are not checked.

`checked`

The checked slot is used for the icon in toggleable buttons when they are checked.

Known issues

The label does not appear as a tooltip.
The checked prop seems to be somewhat inconsistent.

Icon button ​

Props ​

Slots ​

Default ​

unchecked ​

checked ​

Known issues ​