CSC Design System next
VueFlavour Vue React Angular TypeScript PrimaryCSC UI ColorsPrimarySecondaryAccentCustom ColorsRedOrangeGreenBluePurplePink
Guides Getting started Customization Data visualization Migration guide Componentsc-accordionc-alertc-autocompletec-badgec-buttonc-button-groupc-cardc-checkboxc-csc-logoc-data-tablec-dividerc-iconc-icon-buttonc-inputc-linkc-listc-loaderc-login-buttonsc-login-cardc-mainc-menuc-messagec-modalc-navigation-buttonc-otp-inputc-pagec-paginationc-popoverc-progress-barc-progress-circlec-radio-groupc-selectc-side-navigationc-sliderc-spinnerc-statusc-stepsc-switchc-tablec-tabsc-tagsc-text-fieldc-toastsc-toolbarc-tooltip

<c-navigation-button>

Examples

Basic
Vue React Angular TypeScript
<template>
  <div class="example-row">
    <c-navigation-button @click="menuVisible = !menuVisible" />

    <p>Menu {{ menuVisible ? 'open' : 'closed' }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const menuVisible = ref(false);
</script>

API reference

<c-navigation-button>

CSS parts

Style from outside with c-navigation-button::part(name) — parts are the library's only styling customization API.

PartDescription
rootThe inner c-icon-button carrying the menu icon