PillView

A status badge/label control with 6 preset color themes, custom color support, and WCAG luminance calculations for accessible text contrast.

• 
• 

Frameworks

.NET MAUI

Blazor

MAUI

Blazor

Basic Usage

<!-- Preset types -->
<shiny:PillView Text="Active" Type="Success" />
<shiny:PillView Text="Pending" Type="Warning" />
<shiny:PillView Text="Error" Type="Critical" />
<shiny:PillView Text="Info" Type="Info" />
<shiny:PillView Text="Notice" Type="Caution" />

<!-- Custom color (auto-calculates text and border) -->
<shiny:PillView Text="Custom" PillColor="#6366F1" />

<!-- Full override -->
<shiny:PillView Text="Manual" PillColor="#1E1E1E" PillTextColor="White" PillBorderColor="#444" />

Properties

Property	Type	Default	Description
Text	string	""	Text displayed in the pill
Type	PillType	None	Preset theme
PillColor	Color?	null	Custom background (overrides Type)
PillTextColor	Color?	null	Text color override (auto-calculated if null)
PillBorderColor	Color?	null	Border color override (auto-calculated if null)
FontSize	double	12	Text font size
CornerRadius	double	12	Corner radius
FontAttributes	FontAttributes	None	Bold, Italic, None

Preset Types

Type	Background	Text	Border
None	#F3F4F6	#374151	#D1D5DB
Success	#DCFCE7	#166534	#86EFAC
Info	#DBEAFE	#1E40AF	#93C5FD
Warning	#FEF9C3	#854D0E	#FDE047
Caution	#FFEDD5	#9A3412	#FDBA74
Critical	#FEE2E2	#991B1B	#FCA5A5

Color Behavior

• Setting PillColor auto-calculates contrast text color (WCAG luminance) and a darkened border color
• Setting PillTextColor overrides auto-calculated text color
• Setting PillBorderColor overrides auto-calculated border color
• Setting Type applies the preset; PillTextColor/PillBorderColor still override if set

Style Overrides

Each PillType maps to a well-known style key. If your app’s ResourceDictionary contains a Style with the matching key and TargetType="PillView", it is applied instead of the built-in defaults.

PillType	Style Key
None	ShinyPillNoneStyle
Success	ShinyPillSuccessStyle
Info	ShinyPillInfoStyle
Warning	ShinyPillWarningStyle
Caution	ShinyPillCautionStyle
Critical	ShinyPillCriticalStyle

Example override in App.xaml:

<Application.Resources>
    <Style x:Key="ShinyPillSuccessStyle" TargetType="shiny:PillView">
        <Setter Property="PillColor" Value="#22C55E" />
        <Setter Property="PillTextColor" Value="White" />
        <Setter Property="PillBorderColor" Value="#16A34A" />
    </Style>
</Application.Resources>

Blazor Usage

@using Shiny.Blazor.Controls

<!-- Preset types -->
<PillView Text="Active" Type="PillType.Success" />
<PillView Text="Pending" Type="PillType.Warning" />
<PillView Text="Error" Type="PillType.Critical" />
<PillView Text="Info" Type="PillType.Info" />

<!-- Custom color -->
<PillView Text="Custom" PillColor="#6366F1" />

<!-- Full override -->
<PillView Text="Manual" PillColor="#1E1E1E" PillTextColor="white" PillBorderColor="#444" />

Note

On Blazor, colors are CSS strings. The same preset types and auto-contrast behavior apply. Style overrides use Blazor CSS isolation instead of MAUI ResourceDictionary.

AI Skill

Claude CodeGitHub Copilot

Step 1 — Add the marketplace:

claude plugin marketplace add shinyorg/skills

Step 2 — Install the plugin:

claude plugin install shiny@shiny

One plugin installs all 35 Shiny skills. Your agent loads only the skill relevant to what you're building, so there's no cost to having them all available.

Step 1 — Add the marketplace:

copilot plugin marketplace add https://github.com/shinyorg/skills

Step 2 — Install the plugin:

copilot plugin install shiny@shiny

One plugin installs all 35 Shiny skills. Your agent loads only the skill relevant to what you're building, so there's no cost to having them all available.

View shiny-controls Skill