Skip to content
IzzyBlazor 0.1.0-alpha.17

Enter all results ↑ ↓ move Esc close

CopyButton

Copies text, such as an install command.

JavaScript off: what the HTML and CSS do on their own.

A button that copies text: an install command, an ID, a key. It copies Text, or the value or text of the element For names, and shows a check and "Copied" for a moment, like a Code block's copy button.

Usage

razor
<Code>dotnet add package IzzyBlazor</Code>
<CopyButton Text="dotnet add package IzzyBlazor" Label="Copy the command" />

<TextField id="api-key" Label="API key" @bind-Value="key" ReadOnly>
    <EndAddon><CopyButton For="api-key" Variant="ButtonVariant.Outline">Copy</CopyButton></EndAddon>
</TextField>

Copy text

Use Text to copy a fixed value, such as an install command.

Preview

dotnet add package IzzyBlazor --prerelease

Code

Command.razor 
<Row Gap="2" Align="Align.Center" Wrap>
    <Code>dotnet add package IzzyBlazor --prerelease</Code>
    <CopyButton Text="dotnet add package IzzyBlazor --prerelease" Label="Copy the command" Size="ControlSize.Sm" />
</Row>

Off: The button doesn't appear; the command is still there to select.

Copy from a field

Use For to copy the value or text of the element with that id, such as a read-only field.

Preview

Code

FromField.razor 
@* For copies the value of the element with that id, here the field's input. *@
<TextField Label="API key" @bind-Value="_apiKey" id="api-key" ReadOnly MaxWidth="24.Rem" Grow>
    <EndAddon><CopyButton For="api-key" Variant="ButtonVariant.Outline">Copy</CopyButton></EndAddon>
</TextField>

@code {
    private string? _apiKey = "ib_live_4f9a2c7d1e8b";
}

Off: The button doesn't appear and the field takes its space; the key is still there to select.

Details

Copying needs JavaScript (and a secure page), so the button shows only where the browser runs script, from the first paint (it copies once IzzyBlazor's script has loaded); with JavaScript off, the text is still there to select. A ghost neutral icon button by default; with content it shows the text after the icon.

Mode support

What works in each mode, CopyButton
FeatureOffStaticLive
EverythingNoYesYes

Off: JavaScript disabled. Static: a static SSR page with IzzyBlazor's script. Live: an interactive page (Server, WebAssembly or Auto). Copying needs JavaScript: with it off, the button doesn't appear.

Accessibility

  • It renders a native button, shown only where the browser runs script; with JavaScript off the text is still there to select.
  • Without content it's named by Label ("Copy"); with content it's named by the content, and Label is only the tooltip.
  • After copying, the button keeps its name and CopiedLabel ("Copied") is announced politely.
  • If the page has no clipboard access, the button stays as it was and nothing is announced.

Parameters

CopyButton parameters
PropTypeDefault
TextThe text to copy.string?
ForThe id of the element to copy from, in place of Text: an input's or text area's value, or any other element's text.string?
LabelThe button's name for screen readers and its tooltip.string?"Copy"
CopiedLabelAnnounced after copying.string?"Copied"
AccentPrimary (the default) for the main action, Neutral for everything else, Danger for destructive actions, or a custom color (Accent.Of("#0d9488"), Accent.Token("brand")); text on a custom color is chosen for contrast.AccentAccent.Neutral
VariantVisual weight.ButtonVariantButtonVariant.Ghost
SizeHeight.ControlSizeControlSize.Md
StartIconAn icon before the text.IconData?
EndIconAn icon after the text.IconData?
FullWidthStretches to the full width of its container.boolfalse
LoadingShows a spinner in place of the start icon and blocks further clicks.boolfalse
LoadingLabelRead to screen readers while Loading.string?"Loading"
DisabledDisables the button.boolfalse
@bind-PressedMakes it a toggle button, such as Bold in an editor: true shows it pressed, false not, and screen readers hear which (aria-pressed).bool?
ChildContentThe label.RenderFragment?

Plus 16 item props and 4 common props.

Full API

See also

  • Code: inline code or a block, highlighted on the server.
  • IconButton: a square button with a required label.
  • TextField: a labeled text input with add-ons and a password reveal.