Button
Design
Use nmorph or plain to define the visual design.
<script setup lang="ts">
import { NmorphButton } from "@nmorph/nmorph-ui-kit";
</script><template>
<div class="button-design-overview">
<NmorphButton design="nmorph">Nmorph</NmorphButton>
<NmorphButton design="plain">Plain</NmorphButton>
<NmorphButton design="plain" borderless>Borderless</NmorphButton>
<NmorphButton design="plain" color="var(--nmorph-accent-color)">Edit</NmorphButton>
</div>
</template>Icon slots
The `icon` slot now renders a leading icon next to the content, while `icon-only` is the dedicated icon-only button mode.
<script setup lang="ts">
import {
NmorphButton,
NmorphIconCheck,
NmorphIconExit,
} from "@nmorph/nmorph-ui-kit";
</script><template>
<div class="button-icon-slots-overview">
<NmorphButton>
<template #icon>
<NmorphIconCheck />
</template><template #icon-only>
<NmorphIconExit />
</template>Loading
Use boolean to enable or disable the loading icon.
<script setup lang="ts">
import { NmorphButton } from "@nmorph/nmorph-ui-kit";
</script><template>
<div class="button-loading-overview">
<NmorphButton design="nmorph" loading />
<NmorphButton design="plain" loading />
</div>
</template>Ripple
Use boolean to enable or disable the ripple effect on click.
<script setup lang="ts">
import { NmorphButton } from "@nmorph/nmorph-ui-kit";
</script><template>
<div class="button-ripple-overview">
<NmorphButton design="nmorph" ripple text="I have ripple" />
<NmorphButton
design="nmorph"
ripple
accent-bg-on-hover
text="I have ripple and hover background"
/>
<NmorphButton :ripple="false" text="I do not have ripple" />
</div>
</template>Thickness
Set the thickness, available values are thick, basic, thin.
<script setup lang="ts">
import { NmorphButton } from "@nmorph/nmorph-ui-kit";
</script><template>
<div class="button-thickness-overview">
<NmorphButton thickness="thick">Thick</NmorphButton>
<NmorphButton thickness="basic">Basic</NmorphButton>
<NmorphButton thickness="thin">Thin</NmorphButton>
</div>
</template>Disabled
Use boolean to disable the button.
<script setup lang="ts">
import { NmorphButton } from "@nmorph/nmorph-ui-kit";
</script><template>
<div class="button-disabled-overview">
<NmorphButton disabled>Disabled</NmorphButton>
<NmorphButton disabled thickness="thin">Disabled</NmorphButton>
<NmorphButton disabled loading />
</div>
</template>Shape
Info
When using round or square, the size follows the selected thickness.
Use shape to change the border radius of the button.
<script setup lang="ts">
import { NmorphButton } from "@nmorph/nmorph-ui-kit";
</script><template>
<div class="button-shape-overview">
<NmorphButton>Default</NmorphButton>
<NmorphButton class="button-shape-overview__circle" shape="circle" thickness="thick">Circle</NmorphButton>
<NmorphButton shape="round">Round</NmorphButton>
<NmorphButton class="button-shape-overview__square" shape="square" thickness="thick">Square</NmorphButton>
</div>
</template>