`<c-icon-button>`

Examples

Basic

Vue

React

Angular

TypeScript

<template>
  <div class="example-row">
    <c-icon-button>
      <c-icon :path="mdiPlus" />
    </c-icon-button>

    <c-icon-button outlined>
      <c-icon :path="mdiPencil" />
    </c-icon-button>

    <c-icon-button ghost>
      <c-icon :path="mdiHeart" />
    </c-icon-button>

    <c-icon-button text>
      <c-icon :path="mdiDotsVertical" />
    </c-icon-button>

    <c-icon-button danger>
      <c-icon :path="mdiDelete" />
    </c-icon-button>

    <c-icon-button badge="3">
      <c-icon :path="mdiBellOutline" />
    </c-icon-button>

    <c-icon-button disabled>
      <c-icon :path="mdiPlus" />
    </c-icon-button>
  </div>
</template>

<script setup lang="ts">
import {
  mdiBellOutline,
  mdiDelete,
  mdiDotsVertical,
  mdiHeart,
  mdiPencil,
  mdiPlus,
} from '@mdi/js';
</script>

Sizes

Vue

React

Angular

TypeScript

<template>
  <div class="example-row">
    <c-icon-button size="x-small">
      <c-icon :path="mdiMagnify" />
    </c-icon-button>

    <c-icon-button size="small">
      <c-icon :path="mdiMagnify" />
    </c-icon-button>

    <c-icon-button>
      <c-icon :path="mdiMagnify" />
    </c-icon-button>
  </div>
</template>

<script setup lang="ts">
import { mdiMagnify } from '@mdi/js';
</script>

API reference

`<c-icon-button>`

Properties

Property	Attribute	Type	Default	Description
`badge`	`badge`	`null \| number \| string`	`null`	Show a badge on top of the icon
`danger`	`danger`	`boolean`	`false`	Danger variant of the button
`disabled`	`disabled`	`boolean`	`false`	Disable the button
`ghost`	`ghost`	`boolean`	`false`	Ghost variant of the button
`inverted`	`inverted`	`boolean`	`false`	Inverted color for dark backgrounds
`loading`	`loading`	`boolean`	`false`	Loading variant of the button
`outlined`	`outlined`	`boolean`	`false`	Outlined variant of the button
`path`	`path`	`string`	`''`	Path for the svg icon
`size`	`size`	`CIconButtonSize`	`'default'`	Size of the button
`text`	`text`	`boolean`	`false`	Text variant of the button

Slots

Slot	Description
`default`	Default slot for the icon

CSS parts

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

Part	Description
`root`	The native `<button>` element carrying the visual styling
`content`	Inner wrapper around the slotted icon or loading spinner
`badge`	The badge bubble shown in the button's corner

Types

Importable from the package root: import type { … } from '@cscfi/csc-ui'

`CIconButtonProps`

export interface CIconButtonProps {
  /**
   * Show a badge on top of the icon
   *
   * @seeded from csc-ui — verify
   */
  badge?: null | number | string;
  /**
   * Danger variant of the button
   *
   * @seeded from csc-ui — verify
   */
  danger?: boolean;
  /**
   * Disable the button
   *
   * @seeded from csc-ui — verify
   */
  disabled?: boolean;
  /**
   * Ghost variant of the button
   *
   * @seeded from csc-ui — verify
   */
  ghost?: boolean;
  /**
   * Inverted color for dark backgrounds
   *
   * @seeded from csc-ui — verify
   */
  inverted?: boolean;
  /**
   * Loading variant of the button
   *
   * @seeded from csc-ui — verify
   */
  loading?: boolean;
  /**
   * Outlined variant of the button
   *
   * @seeded from csc-ui — verify
   */
  outlined?: boolean;
  /**
   * Path for the svg icon
   *
   * @seeded from csc-ui — verify
   * @freeform SVG path data
   */
  path?: string;
  /**
   * Size of the button
   *
   * @seeded from csc-ui — verify
   */
  size?: CIconButtonSize;
  /**
   * Text variant of the button
   *
   * @seeded from csc-ui — verify
   */
  text?: boolean;
}

`CIconButtonSize`

Size of the icon button. `small` and `x-small` render progressively more compact buttons; omitting the attribute renders the default size.

export type CIconButtonSize = 'default' | 'small' | 'x-small';