@workday/canvas-kit-docs/dist/mdx/15.0-VISUAL-CHANGES.mdx

Documentation components of Canvas Kit components

import { Graphic } from '@workday/canvas-kit-react/icon';

import primaryButtonImage from './images/v15/buttons/v15-primary-button.png';
import secondaryButtonImage from './images/v15/buttons/v15-secondary-button.png';
import tertiaryButtonImage from './images/v15/buttons/v15-tertiary-button.png';
import deleteButtonImage from './images/v15/buttons/v15-delete-button.png';
import segmentedControlImage from './images/v15/buttons/v15-segmented-control.png';

import checkboxImage from './images/v15/inputs/v15-checkbox.png';
import radioImage from './images/v15/inputs/v15-radio.png';
import textInputImage from './images/v15/inputs/v15-text-input.png';
import textAreaImage from './images/v15/inputs/v15-text-area.png';
import selectImage from './images/v15/inputs/v15-select.png';
import multiSelectImage from './images/v15/inputs/v15-multiselect.png';

import avatarImage from './images/v15/indicators/v15-avatar.png';
import badgeImage from './images/v15/indicators/v15-badge.png';
import informationHighlightImage from './images/v15/indicators/v15-information-highlight.png';
import loadingDotsImage from './images/v15/indicators/v15-loading-dots.png';
import pillImage from './images/v15/indicators/v15-pill.png';
import skeletonImage from './images/v15/indicators/v15-skeleton.png'
import statusIndicatorImage from './images/v15/indicators/v15-status-indicator.png';

import cardImage from './images/v15/containers/v15-card.png';
import expandableImage from './images/v15/containers/v15-expandable.png';
import tabsImage from './images/v15/containers/v15-tabs.png';

import breadcrumbsImage from './images/v15/navigation/v15-breadcrumbs.png';
import paginationImage from './images/v15/navigation/v15-pagination.png';


# Canvas Kit 15.0 Visual Changes

This guide contains an overview of the changes in Canvas Kit v15. If you have any issues, feel free
to report them [here](https://github.com/Workday/canvas-kit/issues). For a mode detailed overview of
the changes in v15, please view our
[v15 Upgrade Guide](/help/upgrade-guides/canvas-v15-upgrade-guide/).

## Table of Contents

- [Buttons](#buttons)
  - [Primary Button](#primary-button)
  - [Secondary Button](#secondary-button)
  - [Tertiary Button](#tertiary-button)
  - [Delete Button](#delete-button)
  - [Segmented Control](#segmented-control)
- [Inputs](#inputs)
  - [Checkbox](#checkbox)
  - [Radio (Preview)](#radio-preview)
  - [Text Input](#text-input)
  - [Text Area](#text-area)
  - [Select](#select)
  - [Multi Select](#multi-select)
- [Indicators](#indicators)
  - [Avatar](#avatar)
  - [Badge](#badge)
  - [Information Highlight](#information-highlight)
  - [Loading Dots](#loading-dots)
  - [Pill](#pill)
  - [Skeleton](#skeleton)
  - [Status Indicator (Preview)](#status-indicator-preview)
- [Containers](#containers)
  - [Card](#card)
  - [Expandable](#expandable)
  - [Tabs](#tabs)
- [Navigation](#navigation)
  - [Breadcrumbs](#breadcrumbs)
  - [Pagination](#pagination)

> **NOTE: The `v14` components are using `v3` tokens and the `v15` components are using `v4` tokens.**

## Buttons

### Primary Button
<Graphic src={{url: primaryButtonImage}} />

### Secondary Button
<Graphic src={{url: secondaryButtonImage}} />

### Tertiary Button
<Graphic src={{url: tertiaryButtonImage}} />

### Delete Button
<Graphic src={{url: deleteButtonImage}} />

### Segmented Control
<Graphic src={{url: segmentedControlImage}} />

## Inputs

### Checkbox
<Graphic src={{url: checkboxImage}} />

### Radio (Preview)
<Graphic src={{url: radioImage}} />

### Text Input
<Graphic src={{url: textInputImage}} />

### Text Area
<Graphic src={{url: textAreaImage}} />

### Select
<Graphic src={{url: selectImage}} />

### Multi Select
<Graphic src={{url: multiSelectImage}} />

## Indicators

### Avatar
<Graphic src={{url: avatarImage}} />

### Badge
<Graphic src={{url: badgeImage}} />

### Information Highlight
<Graphic src={{url: informationHighlightImage}} />

### Loading Dots
<Graphic src={{url: loadingDotsImage}} />

### Pill
<Graphic src={{url: pillImage}} />

### Skeleton
<Graphic src={{url: skeletonImage}}/>

### Status Indicator (Preview)
<Graphic src={{url: statusIndicatorImage}} />



## Containers

### Card
<Graphic src={{url: cardImage}} />

### Expandable
<Graphic src={{url: expandableImage}} />

### Tabs
<Graphic src={{url: tabsImage}} />

## Navigation

### Breadcrumbs
<Graphic src={{url: breadcrumbsImage}} />

### Pagination
<Graphic src={{url: paginationImage}} />