uAdvancedButton 1.1.0

.NET 10.0

dotnet add package uAdvancedButton --version 1.1.0

NuGet\Install-Package uAdvancedButton -Version 1.1.0

This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.

<PackageReference Include="uAdvancedButton" Version="1.1.0" />

For projects that support PackageReference, copy this XML node into the project file to reference the package.

<PackageVersion Include="uAdvancedButton" Version="1.1.0" />
                    

                            Directory.Packages.props

<PackageReference Include="uAdvancedButton" />
                    

                            Project file

For projects that support Central Package Management (CPM), copy this XML node into the solution Directory.Packages.props file to version the package.

paket add uAdvancedButton --version 1.1.0

The NuGet Team does not provide support for this client. Please contact its maintainers for support.

#r "nuget: uAdvancedButton, 1.1.0"

#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.

#:package uAdvancedButton@1.1.0

#:package directive can be used in C# file-based apps starting in .NET 10 preview 4. Copy this into a .cs file before any lines of code to reference the package.

#addin nuget:?package=uAdvancedButton&version=1.1.0
                    

                            Install as a Cake Addin

#tool nuget:?package=uAdvancedButton&version=1.1.0
                    

                            Install as a Cake Tool

The NuGet Team does not provide support for this client. Please contact its maintainers for support.

uAdvancedButton - Advanced Button & CTA System for Umbraco 17+

Enterprise-level CTA system with advanced buttons, button groups, dropdown menus, analytics hooks, and full accessibility.

Features

AdvancedButton element type with configurable properties
ButtonGroup element type with layout, gap, alignment, and responsive stacking
Dual-line Subtext — secondary CTA line under the main label (property alias subLabel, e.g. Download Now + PDF · 2.4 MB)
Device visibility — hide buttons on mobile, tablet, or desktop via Layout tab toggles
Gradient presets — 8 one-click aesthetic gradients when Mode is Gradient (Aurora, Ocean, Sunset, and more)
Sticky / floating position — pin standalone CTAs to viewport edges (Bottom Right, Top Left, etc.)
Dropdown mode with keyboard navigation and ARIA compliance
5 size variants (XS–XL), 6 style variants, 4 rendering modes (Solid, Outline, Ghost, Gradient)
6 hover animations (scale, lift, glow, pulse, slide, none)
Confirmation dialog, disabled state
Smooth scroll-to-anchor, modal trigger (custom event)
Full keyboard accessibility and screen reader support
Scoped CSS (uab- prefix), no global pollution
Works in Block List and as standalone ViewComponent

What's new in 1.1.0

Gradient presets — 8 modern CSS gradients (Aurora, Ocean, Sunset, Forest, Midnight, Rose Gold, Cyber, Slate) selectable when Mode is Gradient
Sticky / floating position mode — pin standalone buttons to viewport edges for always-visible CTAs (e.g. Add to Cart)
Safe-area inset support for fixed-position buttons on mobile

What's new in 1.0.3

Polished Subtext dual-line layout (icon + two-line text stacks correctly)
Device visibility toggles — Hide on Mobile, Hide on Tablet, Hide on Desktop
Block List item labels show the actual Button Label in the backoffice (UFM)
Removed loading state property
Shared render partials for Block List rendering

Installation

dotnet add package uAdvancedButton

On first startup, the package automatically provisions:

15+ data types (prefixed uAB)
3 element types: uabAdvancedButton, uabButtonGroup, uabDropdownItem

Setup Guide

Step 1: Add CSS & JS to your layout

In your main layout file (e.g. _Layout.cshtml or Master.cshtml), add the CSS in <head> and the JS before </body>:

<head>
  ...
  <link rel="stylesheet" href="/css/advanced-button.css" />
</head>
<body>
  ...
  <script src="/js/advanced-button.js"></script>
</body>

Step 2: Add Block List to your Document Type

Open the Umbraco backoffice
Go to Settings > Document Types and select your document type (e.g. HomePage)
Add a new property of type Block List
In the Block List configuration, add the element types:
- UAB Advanced Button — for standalone buttons
- UAB Button Group — for grouped buttons (contains a nested Block List of buttons)
Set the block Label to {=buttonLabel} or ${ buttonLabel || 'Button' } so items show the button name in the editor
Save the document type

Step 3: Add buttons in the Content section

Go to Content and edit a page that uses your document type
Click Add on your Block List property
Select UAB Advanced Button or UAB Button Group
Fill in the button properties:
- Content tab: Label, Subtext (secondary line), icon, links, ARIA label, analytics
- Behavior tab: Disabled, confirmation dialog, scroll-to-anchor, modal trigger
- Layout Controls tab: Full width, alignment, spacing, device visibility (hide on mobile/tablet/desktop), position mode (sticky/floating)
- Style Controls tab: Size, style variant, mode, gradient preset, border radius, shadow, hover animation
- Dropdown tab: Enable dropdown toggle, add dropdown items

Step 4: Render in your Razor template

Option A: Use the built-in partial (recommended)

@using Umbraco.Cms.Core.Models.Blocks
@using Umbraco.Cms.Core.Models.PublishedContent
@using Umbraco.Extensions
@{
    IPublishedContent page = Model.Content;

    @* Replace "socialMediaButton" with your Block List property alias *@
    var buttons = page.Value<BlockListModel>("socialMediaButton");
}

@if (buttons != null)
{
    @await Html.PartialAsync("uabRenderButtons", buttons)
}

The uabRenderButtons partial handles both uabAdvancedButton and uabButtonGroup blocks automatically, including nested dropdown items.

Option B: ViewComponent

@await Component.InvokeAsync("AdvancedButton", new {
    model = new AdvancedButtonModel {
        ButtonLabel = "Get Started",
        SubLabel = "Free trial · No card required",
        ExternalLink = "https://example.com",
        StyleVariant = "primary",
        ModeSelector = "solid"
    }
})

Element Types & Property Aliases

uabAdvancedButton

Group	Alias	Type	Description
Content	`buttonLabel`	Text	Main button text (required)
Content	`subLabel`	Text	Subtext — secondary line under label
Content	`iconMedia`	Media Picker	SVG or image icon
Content	`iconPosition`	Dropdown	left, right, icon-only
Content	`internalLink`	Content Picker	Link to Umbraco page
Content	`externalLink`	Text	External URL
Content	`mediaLink`	Media Picker	Link to media file
Content	`anchorTarget`	Text	Anchor ID (without #)
Content	`openInNewTab`	Toggle	Open in new tab
Content	`ariaLabel`	Text	Screen reader label
Content	`analyticsEventName`	Text	Analytics event name
Content	`analyticsPayload`	TextArea	Analytics JSON payload
Behavior	`disabledState`	Toggle	Disable button
Behavior	`confirmationDialog`	Toggle	Confirm before action
Behavior	`confirmationText`	Text	Confirmation message
Behavior	`scrollToAnchor`	Toggle	Smooth scroll on click
Behavior	`modalTrigger`	Toggle	Trigger modal on click
Behavior	`modalTargetId`	Text	Target modal element ID
Layout	`fullWidth`	Toggle	100% width
Layout	`alignment`	Dropdown	left, center, right
Layout	`spacingPreset`	Dropdown	none, xs, sm, md, lg, xl
Layout	`hideOnMobile`	Toggle	Hide button on mobile (< 768px)
Layout	`hideOnTablet`	Toggle	Hide button on tablet (768px–991px)
Layout	`hideOnDesktop`	Toggle	Hide button on desktop (≥ 992px)
Layout	`positionMode`	Dropdown	none, bottom-right, bottom-left, bottom-center, top-right, top-left (standalone only)
Style	`sizeVariant`	Dropdown	xs, sm, md, lg, xl
Style	`styleVariant`	Dropdown	primary, secondary, success, danger, neutral, custom
Style	`modeSelector`	Dropdown	solid, outline, ghost, gradient
Style	`gradientPreset`	Dropdown	aurora, ocean, sunset, forest, midnight, rose-gold, cyber, slate (when Mode = gradient)
Style	`borderRadius`	Dropdown	none, sm, md, lg, xl, full
Style	`shadowEnabled`	Toggle	Drop shadow
Style	`hoverAnimation`	Dropdown	none, scale, lift, glow, pulse, slide
Dropdown	`isDropdown`	Toggle	Enable dropdown mode
Dropdown	`dropdownItems`	Block List	Dropdown menu items

uabDropdownItem

Alias	Type	Description
`label`	Text	Item label
`internalLink`	Content Picker	Internal page link
`externalLink`	Text	External URL
`iconMedia`	Media Picker	Optional icon

uabButtonGroup

Group	Alias	Type	Description
Buttons	`buttons`	Block List	Nested Advanced Buttons
Layout	`groupLayout`	Dropdown	horizontal, vertical
Layout	`wrapEnabled`	Toggle	Allow wrapping
Layout	`equalWidth`	Toggle	Equal-width buttons
Layout	`gapSize`	Dropdown	none, xs, sm, md, lg, xl
Layout	`groupAlignment`	Dropdown	left, center, right
Layout	`responsiveStacking`	Toggle	Stack on mobile

Shipped Files

On build, the .targets file copies package assets into two locations in the consumer project:

File	Copied to (project root)	Also copied to (App_Plugins mirror)
`AdvancedButton.cshtml`	`Views/Partials/`	`App_Plugins/uAdvancedButton/content/Views/Partials/`
`_ButtonInner.cshtml`	`Views/Partials/`	`App_Plugins/uAdvancedButton/content/Views/Partials/`
`ButtonGroup.cshtml`	`Views/Partials/`	`App_Plugins/uAdvancedButton/content/Views/Partials/`
`uabRenderButtons.cshtml`	`Views/Partials/`	`App_Plugins/uAdvancedButton/content/Views/Partials/`
`_uabAdvancedButtonFromElement.cshtml`	`Views/Partials/`	`App_Plugins/uAdvancedButton/content/Views/Partials/`
`_uabAdvancedButtonInner.cshtml`	`Views/Partials/`	`App_Plugins/uAdvancedButton/content/Views/Partials/`
`_uabButtonGroupFromElement.cshtml`	`Views/Partials/`	`App_Plugins/uAdvancedButton/content/Views/Partials/`
`_uabTextStack.cshtml`	`Views/Partials/`	`App_Plugins/uAdvancedButton/content/Views/Partials/`
`Error.cshtml`	`Views/Partials/`	`App_Plugins/uAdvancedButton/content/Views/Partials/`
`NoContent.cshtml`	`Views/Partials/`	`App_Plugins/uAdvancedButton/content/Views/Partials/`
`advanced-button.css`	`wwwroot/css/`	`App_Plugins/uAdvancedButton/content/wwwroot/css/`
`advanced-button.js`	`wwwroot/js/`	`App_Plugins/uAdvancedButton/content/wwwroot/js/`

On dotnet clean, the App_Plugins directory and wwwroot/css/advanced-button.css + wwwroot/js/advanced-button.js are removed.

Analytics Integration

The package outputs data-event and data-payload attributes on buttons. No tracking library is bundled — attach your own listener:

document.addEventListener("uab:analytics", function (e) {
  // e.detail.event  — the event name from "analyticsEventName"
  // e.detail.payload — parsed JSON from "analyticsPayload"
  gtag("event", e.detail.event, e.detail.payload);
});

Requirements

Umbraco 17.1.0+
.NET 10.0

License

🤝 Support

For support, feature requests, or bug reports:

Website: https://www.atharvaits.com
Email: contact@atharvaits.com
Company: Atharva IT Services Pvt. Ltd.

📄 License

This package is free to use for the Umbraco community.

🏢 About Atharva IT Services

Atharva IT Services Pvt. Ltd. a global software development company in Ahmedabad, excels in e-commerce solutions, web development, and software testing.

Made with ❤️ by Atharva IT Services

Product	Compatible and additional computed target framework versions.
.NET	net10.0 is compatible. net10.0-android was computed. net10.0-browser was computed. net10.0-ios was computed. net10.0-maccatalyst was computed. net10.0-macos was computed. net10.0-tvos was computed. net10.0-windows was computed.

Compatible target framework(s)

Included target framework(s) (in package)

Learn more about Target Frameworks and .NET Standard.

net10.0
- Umbraco.Cms.Infrastructure (>= 17.1.0)
- Umbraco.Cms.Web.Common (>= 17.1.0)
- Umbraco.Cms.Web.Website (>= 17.1.0)

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version	Downloads	Last Updated
1.1.0	58	5/29/2026
1.0.3	94	5/26/2026
1.0.2	97	5/5/2026
1.0.1	122	2/23/2026
1.0.0	127	2/13/2026