Common button
Preview
Source code
html
<h-button
:kind="state.kind"
:content="capitalizeFirst(state.kind) + ' button'"
:disabled="state.disabled"
@click="onClick"
/>
<h-button
:kind="state.kind"
:content="capitalizeFirst(state.kind) + ' button'"
:disabled="state.disabled"
@click="onClick"
>
<plus />
</h-button><h-button
:kind="state.kind"
:content="capitalizeFirst(state.kind) + ' button'"
:disabled="state.disabled"
@click="onClick"
/>
<h-button
:kind="state.kind"
:content="capitalizeFirst(state.kind) + ' button'"
:disabled="state.disabled"
@click="onClick"
>
<plus />
</h-button>A common button, ideal for your app's most basic actions. See the Material 3 documentation on this component.
Props
ts
defineProps<{
// The kind of button to render.
// See the above preview for how each renders.
kind: 'elevated' | 'filled' | 'filled-tonal' | 'outline' | 'text'
// The text content to include in the button.
content?: string
// The label to use for accessibility.
// If none is provided, the content will be used.
label?: string,
disabled?: boolean
// Which element to render the button as.
as?: string | Component
// See the `Pitfalls` section of the documentation.
addEmptyPadding?: boolean
removeEmptyPadding?: boolean
}>)defineProps<{
// The kind of button to render.
// See the above preview for how each renders.
kind: 'elevated' | 'filled' | 'filled-tonal' | 'outline' | 'text'
// The text content to include in the button.
content?: string
// The label to use for accessibility.
// If none is provided, the content will be used.
label?: string,
disabled?: boolean
// Which element to render the button as.
as?: string | Component
// See the `Pitfalls` section of the documentation.
addEmptyPadding?: boolean
removeEmptyPadding?: boolean
}>)Slots
Default
The default slot is used for icons.
Pitfalls / Known bugs
Due to it being somewhat difficult to tell if a slot is actually being rendered, the component may not respond correctly if an icon is dynamically removed/added, although changing the icon should work fine. As a stopgap, you can use add-empty-padding and/or remove-empty-padding in order to force the button to render in the desired manner.
Additionally, if as is set to a or router-link, an underline may show on hover.