Skip to content

feat(BbAccordionTrigger): allow custom icon. #347

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mathewtaylor merged 1 commit into from
Jun 14, 2026
Merged

feat(BbAccordionTrigger): allow custom icon. #347

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 34 additions & 0 deletions demos/BlazorBlueprint.Demo.Shared/CodeExamples/Components/Accordion/custom-icon.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<BbAccordion Type="AccordionType.Single" Collapsible="true" Class="w-full">
@* Any icon component — the bool context is the open state for animations *@
<BbAccordionItem Value="icon-1">
<BbAccordionTrigger>
<ChildContent>How do I use a Lucide icon?</ChildContent>
<Icon Context="isOpen">
<LucideIcon Name="plus"
Size="16"
Class="@($"shrink-0 transition-transform duration-200 {(isOpen ? "rotate-45" : "")}")" />
</Icon>
</BbAccordionTrigger>
<BbAccordionContent>
Pass any icon component to the <code>Icon</code> parameter. The context
parameter exposes the open state so you can animate it.
</BbAccordionContent>
</BbAccordionItem>

@* Ad-hoc SVG content also works *@
<BbAccordionItem Value="icon-2">
<BbAccordionTrigger>
<ChildContent>Can I use ad-hoc SVG?</ChildContent>
<Icon Context="isOpen">
<svg class="@($"h-4 w-4 shrink-0 transition-transform duration-200 {(isOpen ? "rotate-45" : "")}")"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M12 5v14M5 12h14" />
</svg>
</Icon>
</BbAccordionTrigger>
<BbAccordionContent>
Yes. The <code>Icon</code> parameter accepts any markup, including raw SVG.
</BbAccordionContent>
</BbAccordionItem>
</BbAccordion>
52 changes: 52 additions & 0 deletions demos/BlazorBlueprint.Demo.Shared/Pages/Components/AccordionDemo.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -194,6 +194,53 @@
<CodeBlock Source="Components/Accordion/rich-content.txt" />
</section>

<section class="space-y-4">
<div class="space-y-2">
<h2 class="text-2xl font-semibold">Custom Icon</h2>
<p class="text-muted-foreground">
Replace the default chevron with any icon component
(<code>&lt;LucideIcon&gt;</code>, <code>&lt;FontAwesomeIcon&gt;</code>,
<code>&lt;FeatherIcon&gt;</code>, <code>&lt;HeroIcon&gt;</code>) or ad-hoc SVG.
The icon receives a <code>bool</code> context with the open state for animation.
</p>
</div>

<BbAccordion Type="AccordionType.Single" Collapsible="true" Class="w-full">
<BbAccordionItem Value="icon-1">
<BbAccordionTrigger>
<ChildContent>How do I use a Lucide icon?</ChildContent>
<Icon Context="isOpen">
<LucideIcon Name="plus"
Size="16"
Class="@($"shrink-0 transition-transform duration-200 {(isOpen ? "rotate-45" : "")}")" />
</Icon>
</BbAccordionTrigger>
<BbAccordionContent>
Pass any icon component to the <code>Icon</code> parameter. The context
parameter exposes the open state so you can animate it.
</BbAccordionContent>
</BbAccordionItem>

<BbAccordionItem Value="icon-2">
<BbAccordionTrigger>
<ChildContent>Can I use ad-hoc SVG?</ChildContent>
<Icon Context="isOpen">
<svg class="@($"h-4 w-4 shrink-0 transition-transform duration-200 {(isOpen ? "rotate-45" : "")}")"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M12 5v14M5 12h14" />
</svg>
</Icon>
</BbAccordionTrigger>
<BbAccordionContent>
Yes. The <code>Icon</code> parameter accepts any markup, including raw SVG.
</BbAccordionContent>
</BbAccordionItem>
</BbAccordion>

<CodeBlock Source="Components/Accordion/custom-icon.txt" />
</section>

<!-- Accessibility Notes -->
<AccessibilityList>
<AriaAttributes>
Expand Down Expand Up @@ -267,6 +314,11 @@
<ApiParameter Name="As" Type="string" Default="&quot;h3&quot;">
HTML heading element tag to wrap the trigger button.
</ApiParameter>
<ApiParameter Name="Icon" Type="RenderFragment&lt;bool&gt;?" Default="null">
Custom icon rendered in place of the default chevron. Accepts any icon
component or ad-hoc SVG. The <code>bool</code> context is the open state.
When not set, the default rotating chevron is used.
</ApiParameter>
</ApiReference>

<ApiReference ComponentName="BbAccordionContent">
Expand Down
47 changes: 34 additions & 13 deletions src/BlazorBlueprint.Components/Components/Accordion/BbAccordionTrigger.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,19 +8,26 @@
<BlazorBlueprint.Primitives.Accordion.BbAccordionTrigger As="@As" Class="@CssClass">
<div class="flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline">
@ChildContent
<svg class="h-4 w-4 shrink-0 transition-transform duration-200 data-[state=open]:rotate-180"
data-state="@(Item?.IsOpen == true ? "open" : "closed")"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round">
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
@if (Icon != null)
{
@Icon(Item?.IsOpen == true)
}
else
{
<svg class="h-4 w-4 shrink-0 transition-transform duration-200 data-[state=open]:rotate-180"
data-state="@(Item?.IsOpen == true ? "open" : "closed")"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round">
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
}
</div>
</BlazorBlueprint.Primitives.Accordion.BbAccordionTrigger>

Expand All @@ -43,6 +50,20 @@
[Parameter]
public string? Class { get; set; }

/// <summary>
/// Optional custom icon rendered at the end of the trigger in place of the default
/// chevron. Accepts any icon component (e.g. <c>&lt;LucideIcon&gt;</c>,
/// <c>&lt;FontAwesomeIcon&gt;</c>, <c>&lt;FeatherIcon&gt;</c>, <c>&lt;HeroIcon&gt;</c>)
/// or ad-hoc SVG/markup content. When not specified, the default chevron icon
/// (which rotates on open) is used.
/// </summary>
/// <remarks>
/// The context parameter is a <see cref="bool"/> indicating whether the parent
/// accordion item is open, so the icon can be animated to reflect the open state.
/// </remarks>
[Parameter]
public RenderFragment<bool>? Icon { get; set; }

/// <summary>
/// The HTML element tag to use for the heading wrapper.
/// Default is "h3".
Expand Down
1 change: 1 addition & 0 deletions ...sts/ApiSurface/ComponentsApiSurfaceTests.ComponentsApiSurfaceMatchesBaseline.verified.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@
- As : String
- ChildContent : RenderFragment
- Class : String
- Icon : RenderFragment<Boolean>
- Item : BbAccordionItem [CascadingParameter]

### BbAlert (BlazorBlueprint.Components)
Expand Down