Skip to content

Add new Icon parameter to BitActionButton (#11958) #11959

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
msynk merged 1 commit into from
Jan 6, 2026
Merged

Add new Icon parameter to BitActionButton (#11958) #11959

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
11 changes: 6 additions & 5 deletions src/BlazorUI/Bit.BlazorUI/Components/Buttons/ActionButton/BitActionButton.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
@{
RenderFragment b = @<div style="@Styles?.Content" class="bit-acb-con @Classes?.Content">@(Body ?? ChildContent)</div>;
var body = ((Body ?? ChildContent) is not null && IconOnly is false) ? b : null;
var icon = BitIconInfo.From(Icon, IconName);
}

@if (Href.HasNoValue())
Expand Down Expand Up @@ -37,9 +38,9 @@
}
else
{
if (IconName is not null)
@if (icon is not null)
{
<i style="@Styles?.Icon" class="bit-acb-ico bit-icon bit-icon--@IconName @Classes?.Icon" />
<i style="@Styles?.Icon" class="bit-acb-ico @icon.GetCssClasses() @Classes?.Icon" />
}

@body
Expand All @@ -64,11 +65,11 @@ else
aria-hidden="@AriaHidden"
aria-describedby="@AriaDescription">
<span class="bit-acb-inn">
@if (IconName is not null)
@if (icon is not null)
{
<i style="@Styles?.Icon" class="bit-acb-ico bit-icon bit-icon--@IconName @Classes?.Icon" />
<i style="@Styles?.Icon" class="bit-acb-ico @icon.GetCssClasses() @Classes?.Icon" />
}

@body
</span>
</a>
Expand Down
19 changes: 18 additions & 1 deletion src/BlazorUI/Bit.BlazorUI/Components/Buttons/ActionButton/BitActionButton.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,22 @@ public partial class BitActionButton : BitComponentBase
public string? Href { get; set; }

/// <summary>
/// Gets or sets the name of the icon to display.
/// Gets or sets the icon to display using custom CSS classes for external icon libraries.
/// Takes precedence over <see cref="IconName"/> when both are set.
/// </summary>
/// <remarks>
/// Use this property to render icons from external libraries like FontAwesome, Material Icons, or Bootstrap Icons.
/// For built-in Fluent UI icons, use <see cref="IconName"/> instead.
/// </remarks>
/// <example>
/// FontAwesome: Icon="BitIconInfo.Fa("solid house")"
/// Material: Icon="BitIconInfo.Material("home")"
/// Custom CSS: Icon="BitIconInfo.Css("my-icon-class")"
/// </example>
[Parameter] public BitIconInfo? Icon { get; set; }

/// <summary>
/// Gets or sets the name of the icon to display from the built-in Fluent UI icons.
/// </summary>
/// <remarks>
/// The icon name should be from the Fluent UI icon set (e.g., <c>BitIconName.AddFriend</c>).
Expand All @@ -100,6 +115,8 @@ public partial class BitActionButton : BitComponentBase
/// <br />
/// The value is case-sensitive and must match a valid icon identifier.
/// If not set or set to <c>null</c>, no icon will be rendered.
/// <br />
/// For external icon libraries, use <see cref="Icon"/> instead.
/// </remarks>
[Parameter] public string? IconName { get; set; }

Expand Down
19 changes: 18 additions & 1 deletion src/BlazorUI/Bit.BlazorUI/Components/Buttons/ActionButton/BitActionButtonParams.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,17 @@ public class BitActionButtonParams : BitComponentBaseParams, IBitComponentParams
public string? Href { get; set; }

/// <summary>
/// Gets or sets the name of the icon to display.
/// Gets or sets the icon to display using custom CSS classes for external icon libraries.
/// Takes precedence over <see cref="IconName"/> when both are set.
/// </summary>
/// <remarks>
/// Use this property to render icons from external libraries like FontAwesome, Material Icons, or Bootstrap Icons.
/// For built-in Fluent UI icons, use <see cref="IconName"/> instead.
/// </remarks>
public BitIconInfo? Icon { get; set; }

/// <summary>
/// Gets or sets the name of the icon to display from the built-in Fluent UI icons.
/// </summary>
/// <remarks>
/// The icon name should be from the Fluent UI icon set (e.g., <c>BitIconName.AddFriend</c>).
Expand All @@ -73,6 +83,8 @@ public class BitActionButtonParams : BitComponentBaseParams, IBitComponentParams
/// <br />
/// The value is case-sensitive and must match a valid icon identifier.
/// If not set or set to <c>null</c>, no icon will be rendered.
/// <br />
/// For external icon libraries, use <see cref="Icon"/> instead.
/// </remarks>
public string? IconName { get; set; }

Expand Down Expand Up @@ -213,6 +225,11 @@ public void UpdateParameters(BitActionButton bitActionButton)
hrefWasSet = true;
}

if (Icon is not null && bitActionButton.HasNotBeenSet(nameof(Icon)))
{
bitActionButton.Icon = Icon;
}

if (IconName.HasValue() && bitActionButton.HasNotBeenSet(nameof(IconName)))
{
bitActionButton.IconName = IconName;
Expand Down
67 changes: 64 additions & 3 deletions ...BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ActionButton/BitActionButtonDemo.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -452,7 +452,68 @@
</div>
</DemoExample>

<DemoExample Title="Size" RazorCode="@example12RazorCode" Id="example12">
<DemoExample Title="External Icons" RazorCode="@example12RazorCode" Id="example12">
<div>Use icons from external libraries like FontAwesome, Material Icons, and Bootstrap Icons with the <b>Icon</b> parameter.</div>

<br />
<br />

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" />

<div>FontAwesome:</div>
<br />
<BitActionButton Icon="@("fa-solid fa-house")">
House (Icon=@@("fa-solid fa-house"))
</BitActionButton>

<br/>

<BitActionButton Icon="@BitIconInfo.Css("fa-solid fa-heart")" Color="BitColor.Secondary">
Heart (Icon="@@BitIconInfo.Css("fa-solid fa-heart")")
</BitActionButton>

<br/>

<BitActionButton Icon="@BitIconInfo.Fa("fa-brands fa-github")" Color="BitColor.Tertiary">
GitHub (Icon="@@BitIconInfo.Fa("fa-brands fa-github")")
</BitActionButton>

<br/>

<BitActionButton Icon="@BitIconInfo.Fa("solid rocket")" Color="BitColor.Error">
Rocket (Icon="@@BitIconInfo.Fa("solid rocket")")
</BitActionButton>

<br /><br /><br /><br />

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" />

<div>Bootstrap:</div>
<br />
<BitActionButton Icon="@("bi bi-house-fill")">
House (Icon=@@("bi bi-house-fill"))
</BitActionButton>

<br/>

<BitActionButton Icon="@BitIconInfo.Css("bi bi-heart-fill")" Color="BitColor.Secondary">
Heart (Icon="@@BitIconInfo.Css("bi bi-heart-fill")")
</BitActionButton>

<br/>

<BitActionButton Icon="@BitIconInfo.Bi("github")" Color="BitColor.Tertiary">
GitHub (Icon="@@BitIconInfo.Bi("github")")
</BitActionButton>

<br/>

<BitActionButton Icon="@BitIconInfo.Bi("gear-fill")" Color="BitColor.Error">
Gear (Icon="@@BitIconInfo.Bi("gear-fill")")
</BitActionButton>
</DemoExample>

<DemoExample Title="Size" RazorCode="@example13RazorCode" Id="example13">
<div>Compare the Small, Medium, and Large presets to gauge typography and padding differences.</div>

<div>Using the <b>Size</b> parameter and its value of type <BitLink Href="#size-enum">BitSize</BitLink> enum:</div>
Expand All @@ -474,7 +535,7 @@
</div>
</DemoExample>

<DemoExample Title="Style & Class" RazorCode="@example13RazorCode" Id="example13">
<DemoExample Title="Style & Class" RazorCode="@example14RazorCode" Id="example14">
<div>Override look-and-feel with inline styles or custom CSS classes applied to the root, icon, and content.</div>

<div>Using the <b>Styles</b> and <b>Classes</b> parameters and their value of <BitLink Href="#class-styles">BitActionButtonClassStyles</BitLink> class:</div>
Expand All @@ -498,7 +559,7 @@
</div>
</DemoExample>

<DemoExample Title="RTL" RazorCode="@example14RazorCode" Id="example14">
<DemoExample Title="RTL" RazorCode="@example15RazorCode" Id="example15">
<div>View BitActionButton inside a right-to-left layout, respecting RTL direction and icon/text ordering.</div>

<br />
Expand Down
42 changes: 40 additions & 2 deletions ...zorUI.Demo.Client.Core/Pages/Components/Buttons/ActionButton/BitActionButtonDemo.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,11 +88,20 @@ public partial class BitActionButtonDemo
Description = "The value of the href attribute of the link rendered by the button. If provided, the component will be rendered as an anchor tag instead of button.",
},
new()
{
Name = "Icon",
Type = "BitIconInfo?",
DefaultValue = "null",
Description = "Gets or sets the icon to display using custom CSS classes for external icon libraries. Takes precedence over IconName when both are set.",
LinkType = LinkType.Link,
Href = "#bit-icon-info",
},
new()
{
Name = "IconName",
Type = "string?",
DefaultValue = "null",
Description = "Gets or sets the name of the icon to display.",
Description = "Gets or sets the name of the icon to display from the built-in Fluent UI icons.",
LinkType = LinkType.Link,
Href = "https://blazorui.bitplatform.dev/iconography",
},
Expand Down Expand Up @@ -220,7 +229,36 @@ public partial class BitActionButtonDemo
Description = "Custom class or style applied to the loading spinner element of the BitActionButton."
}
]
}
},
new()
{
Id = "bit-icon-info",
Title = "BitIconInfo",
Parameters =
[
new()
{
Name = "Name",
Type = "string?",
DefaultValue = "null",
Description = "Gets or sets the name of the icon."
},
new()
{
Name = "BaseClass",
Type = "string?",
DefaultValue = "null",
Description = "Gets or sets the base CSS class for the icon. For built-in Fluent UI icons, this defaults to \"bit-icon\". For external icon libraries like FontAwesome, you might set this to \"fa\" or leave empty."
},
new()
{
Name = "Prefix",
Type = "string?",
DefaultValue = "null",
Description = "Gets or sets the CSS class prefix used before the icon name. For built-in Fluent UI icons, this defaults to \"bit-icon--\". For external icon libraries, you might set this to \"fa-\" or leave empty."
},
]
},
];

private readonly List<ComponentSubEnum> componentSubEnums =
Expand Down
42 changes: 40 additions & 2 deletions ...mo.Client.Core/Pages/Components/Buttons/ActionButton/BitActionButtonDemo.razor.samples.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -278,6 +278,44 @@ More info
</BitActionButton>";

private readonly string example12RazorCode = @"
<link rel=""stylesheet"" href=""https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"" />

<BitActionButton Icon=""@(""fa-solid fa-house"")"">
House (Icon=@@(""fa-solid fa-house""))
</BitActionButton>

<BitActionButton Icon=""@BitIconInfo.Css(""fa-solid fa-heart"")"" Color=""BitColor.Secondary"">
Heart (Icon=""@@BitIconInfo.Css(""fa-solid fa-heart"")"")
</BitActionButton>

<BitActionButton Icon=""@BitIconInfo.Fa(""fa-brands fa-github"")"" Color=""BitColor.Tertiary"">
GitHub (Icon=""@@BitIconInfo.Fa(""fa-brands fa-github"")"")
</BitActionButton>

<BitActionButton Icon=""@BitIconInfo.Fa(""solid rocket"")"" Color=""BitColor.Error"">
Rocket (Icon=""@@BitIconInfo.Fa(""solid rocket"")"")
</BitActionButton>


<link rel=""stylesheet"" href=""https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"" />

<BitActionButton Icon=""@(""bi bi-house-fill"")"">
House (Icon=@@(""bi bi-house-fill""))
</BitActionButton>

<BitActionButton Icon=""@BitIconInfo.Css(""bi bi-heart-fill"")"" Color=""BitColor.Secondary"">
Heart (Icon=""@@BitIconInfo.Css(""bi bi-heart-fill"")"")
</BitActionButton>

<BitActionButton Icon=""@BitIconInfo.Bi(""github"")"" Color=""BitColor.Tertiary"">
GitHub (Icon=""@@BitIconInfo.Bi(""github"")"")
</BitActionButton>

<BitActionButton Icon=""@BitIconInfo.Bi(""gear-fill"")"" Color=""BitColor.Error"">
Gear (Icon=""@@BitIconInfo.Bi(""gear-fill"")"")
</BitActionButton>";

private readonly string example13RazorCode = @"
<BitActionButton Size=""BitSize.Small"" IconName=""@BitIconName.FontSize"">
Small
</BitActionButton>
Expand All @@ -290,7 +328,7 @@ More info
Large
</BitActionButton>";

private readonly string example13RazorCode = @"
private readonly string example14RazorCode = @"
<style>
.custom-icon {
color: hotpink;
Expand Down Expand Up @@ -335,7 +373,7 @@ Action Button Styles
Action Button Classes (Hover me)
</BitActionButton>";

private readonly string example14RazorCode = @"
private readonly string example15RazorCode = @"
<BitActionButton Dir=""BitDir.Rtl"" IconName=""@BitIconName.AddFriend"">
ساخت حساب
</BitActionButton>";
Expand Down
Loading
Loading