`<c-button>`

Buttons trigger actions — submitting a form, opening a modal, confirming a choice. Use one primary (default appearance) button per view; secondary actions use the `outlined`, `ghost` or `text` appearances.

Usage

When to use

Performing an action on the current page (save, send, confirm).
Navigating with button semantics: set href to render a real link styled as a button.

When not to use

Inline navigation within text — use c-link.
Toggling a persistent on/off state — use c-switch.

Accessibility

The root part is a native <button> (or <a> when href is set), so focus, keyboard activation and screen-reader semantics come from the platform. When only an icon is slotted, provide an accessible name on the host, e.g. aria-label="Close".

Customization

Restyle via CSS parts from your own stylesheet:

c-button::part(root) {
  border-radius: 9999px;
}

Examples

Sizes

Vue

React

Angular

TypeScript

<template>
  <div class="example-row">
    <c-button size="small">Small</c-button>

    <c-button>Default</c-button>

    <c-button size="large">Large</c-button>
  </div>
</template>

Variants

Vue

React

Angular

TypeScript

<template>
  <div class="example-row">
    <c-button>Default</c-button>

    <c-button outlined>Outlined</c-button>

    <c-button ghost>Ghost</c-button>

    <c-button text>Text</c-button>

    <c-button danger>Danger</c-button>

    <c-button disabled>Disabled</c-button>
  </div>
</template>

API reference

`<c-button>`

Properties

Property	Attribute	Type	Default	Description
`active`	`active`	`boolean`	—	Pressed (toggle) state — renders the selected look and sets `aria-pressed`. Leave unset for regular action buttons: only a true/false value marks the button as a toggle. Driven by `c-button-group` on its slotted buttons.
`danger`	`danger`	`boolean`	`false`	Danger variant style
`disabled`	`disabled`	`boolean`	`false`	Disable the button
`fit`	`fit`	`boolean`	`false`	Fit width to containing element
`ghost`	`ghost`	`boolean`	`false`	Light button background
`hostId`	`host-id`	`string`	`''`	Id of the button
`href`	`href`	`string`	`''`	Hyperlink url
`inverted`	`inverted`	`boolean`	`false`	Inverted button style for dark backgrounds
`loading`	`loading`	`boolean`	`false`	Display loader on the button
`noRadius`	`no-radius`	`boolean`	`false`	Remove the default border radius
`noRipple`	`no-ripple`	`boolean`	`false`	Suppress the click ripple (e.g. when a wrapper owns the press feedback).
`outlined`	`outlined`	`boolean`	`false`	Outlined button style
`size`	`size`	`CButtonSize`	`'default'`	Size of the button
`target`	`target`	`string`	`'_blank'`	Hyperlink target
`text`	`text`	`boolean`	`false`	Transparent button background
`type`	`type`	`CButtonType`	`'button'`	Button type
`value`	`value`	`number \| string`	—	Value for the button - for use in the c-button-group

Slots

Slot	Description
`default`	Button label content.
`icon`	Leading icon, vertically centered before the label.
`description`	Secondary text rendered below the label.

CSS parts

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

Part	Description
`root`	The native `<button>` / `<a>` element carrying the visual styling.
`content`	Layout wrapper for the label, icon and description.
`description`	Wrapper of the `description` slot.

CSS custom properties

Property	Description
`--c-font-family`	Font stack applied to the label (native buttons do not inherit it).

Types

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

`CButtonProps`

export interface CButtonProps {
  /**
   * Pressed (toggle) state — renders the selected look and sets
   * `aria-pressed`. Leave unset for regular action buttons: only a
   * true/false value marks the button as a toggle. Driven by
   * `c-button-group` on its slotted buttons.
   */
  active?: boolean;
  /**
   * Danger variant style
   *
   * @seeded from csc-ui — verify
   */
  danger?: boolean;
  /**
   * Disable the button
   *
   * @seeded from csc-ui — verify
   */
  disabled?: boolean;
  /**
   * Fit width to containing element
   *
   * @seeded from csc-ui — verify
   */
  fit?: boolean;
  /**
   * Light button background
   *
   * @seeded from csc-ui — verify
   */
  ghost?: boolean;
  /**
   * Id of the button
   *
   * @seeded from csc-ui — verify
   * @freeform
   */
  hostId?: string;
  /**
   * Hyperlink url
   *
   * @seeded from csc-ui — verify
   * @freeform any URL
   */
  href?: string;
  /**
   * Inverted button style for dark backgrounds
   *
   * @seeded from csc-ui — verify
   */
  inverted?: boolean;
  /**
   * Display loader on the button
   *
   * @seeded from csc-ui — verify
   */
  loading?: boolean;
  /**
   * Remove the default border radius
   *
   * @seeded from csc-ui — verify
   */
  noRadius?: boolean;
  /** Suppress the click ripple (e.g. when a wrapper owns the press feedback). */
  noRipple?: boolean;
  /**
   * Outlined button style
   *
   * @seeded from csc-ui — verify
   */
  outlined?: boolean;
  /**
   * Size of the button
   *
   * @seeded from csc-ui — verify
   */
  size?: CButtonSize;
  /**
   * Hyperlink target
   *
   * @seeded from csc-ui — verify
   * @freeform any browsing-context name (e.g. _blank, _self)
   */
  target?: string;
  /**
   * Transparent button background
   *
   * @seeded from csc-ui — verify
   */
  text?: boolean;
  /**
   * Button type
   *
   * @seeded from csc-ui — verify
   */
  type?: CButtonType;
  /**
   * Value for the button
   * - for use in the c-button-group
   *
   * @seeded from csc-ui — verify
   */
  value?: number | string;
}

`CButtonSize`

Size of the button.

export type CButtonSize = 'default' | 'large' | 'small';

`CButtonType`

Native `type` of the underlying `<button>` element. Ignored when `href` turns the component into a link.

export type CButtonType = 'button' | 'reset' | 'submit';