Skip to content
COLOR AND FILE · FREE

ColorButton

A familiar toolbar color button that always shows the chosen color.

The familiar toolbar color button: an icon with a bar of the chosen color under it, opening the color chooser on click.

Why it helps

  • Shows the current color
  • Toolbar friendly
  • Opens the color chooser

Where it fits

  • Text and fill color in editors
  • Drawing tools
  • Labels
ColorButton control in a RayCraft page

Example

    <ColorButton Icon="IconName.TextColor" Label="Text color" @bind-Value="_text" />
    <ColorButton Icon="IconName.FillColor" Label="Fill color" @bind-Value="_fill" FallbackColor="#ffff00" />
    <ColorButton Icon="IconName.Highlight" Label="Highlight (disabled)" Value="_fill" Disabled="true" />
<p>Text: @(_text ?? "default"), fill: @(_fill ?? "none")</p>

@code {
    private string? _text = "#cc0000";
    private string? _fill;
}

A short fragment. Add @using RayCraft.Blazor.Components to your page and use an interactive render mode.

Included in RayCraft Free. Working examples are in the GitHub repository (MIT); it holds example and demo code, not the library code.

All controls ยท Documentation