App UI Kit
Components
Accordion(opens in a new tab or window)Alert(opens in a new tab or window)Avatar(opens in a new tab or window)AvatarGroup(opens in a new tab or window)AudioCard(opens in a new tab or window)Badge(opens in a new tab or window)Box(opens in a new tab or window)Button(opens in a new tab or window)Carousel(opens in a new tab or window)Checkbox(opens in a new tab or window)CheckboxGroup(opens in a new tab or window)ColorSelector(opens in a new tab or window)Column(opens in a new tab or window)Columns(opens in a new tab or window)CustomizableSelect(opens in a new tab or window)DateInput(opens in a new tab or window)EmbedCard(opens in a new tab or window)FileInput(opens in a new tab or window)FileInputItem(opens in a new tab or window)Flyout(opens in a new tab or window)FlyoutMenu(opens in a new tab or window)FormField(opens in a new tab or window)Grid(opens in a new tab or window)HorizontalCard(opens in a new tab or window)Icons(opens in a new tab or window)ImageCard(opens in a new tab or window)InputPill(opens in a new tab or window)Link(opens in a new tab or window)LoadingIndicator(opens in a new tab or window)Masonry(opens in a new tab or window)MultilineInput(opens in a new tab or window)NumberInput(opens in a new tab or window)Pill(opens in a new tab or window)PillsInput(opens in a new tab or window)Placeholder(opens in a new tab or window)ProgressBar(opens in a new tab or window)RadioGroup(opens in a new tab or window)Rows(opens in a new tab or window)Scrollable(opens in a new tab or window)SearchInputMenu(opens in a new tab or window)SegmentedControl(opens in a new tab or window)Select(opens in a new tab or window)Slider(opens in a new tab or window)SurfaceHeader(opens in a new tab or window)Swatch(opens in a new tab or window)Switch(opens in a new tab or window)Tabs(opens in a new tab or window)Text(opens in a new tab or window)TextInput(opens in a new tab or window)TextPlaceholder(opens in a new tab or window)TimeInput(opens in a new tab or window)Title(opens in a new tab or window)TitlePlaceholder(opens in a new tab or window)TruncatedText(opens in a new tab or window)TypographyCard(opens in a new tab or window)VideoCard(opens in a new tab or window)
Patterns
Account Switcher(opens in a new tab or window)Credit Counter(opens in a new tab or window)Empty State(opens in a new tab or window)Flyout(opens in a new tab or window)Loading Progress Bar(opens in a new tab or window)Search(opens in a new tab or window)Surface Header(opens in a new tab or window)
DraggableAudio
API reference for the DraggableAudio component.
The DraggableAudio component has been deprecated. Instead, use the AudioCard(opens in a new tab or window) component.
Usage
import React from "react";import { AudioContextProvider } from "components/audio_context";import { DraggableAudio } from "components/draggable_audio";import { upload } from "@canva/asset";export function App() {return (<AudioContextProvider><DraggableAudiotitle="Example audio"durationMs={86047}previewUrl="https://www.canva.dev/example-assets/audio-import/audio.mp3"resolveAudioRef={() => {return upload({type: "audio",title: "Example audio",mimeType: "audio/mp3",durationMs: 86047,url: "https://www.canva.dev/example-assets/audio-import/audio.mp3",aiDisclosure: "none",});}}/></AudioContextProvider>);}
TSX
The AudioContextProvider component ensures that only one audio file will play at a time.
Props
titlestringRequired
A human-readable title that appears in the Canva editor.
urlstringRequired
The URL of the audio file.
previewUrlstringRequired
The URL of the audio file to play when the user clicks the Play button.
durationMsnumberRequired
The duration of the audio file, in milliseconds.
resolveAudioReffunctionRequired
A function that returns the result of the upload method.