Pill Button

Primary CTA button in a rounded pill shape with press flash animation.

Primitives primitives button pill cta animation

1 Overview

2 Properties

3 USS Classes

4 Events

5 Methods

6 Usage

7 Using the Control

8 Example Scenes

9 Credits and Donation

10 External links

Overview

PillButton is a rounded, gradient-filled call-to-action button with a flash feedback animation on press. The gradient is generated from two colors (inner and outer) into a 256 × 1 Texture2D that is set as the background image. A white overlay fades in briefly on tap to provide tactile feedback. The gradient texture is destroyed when the element detaches from the panel.

Typical use cases:

Primary call-to-action buttons (Continue, Submit, Get Started)
Form submission buttons
Prominent single-action navigation controls

Properties

Name	Description	Options
`Text`	Gets or sets the button label text.	`string`

USS Classes

Class	Description
`pillButton`	Root element.
`pillButton__background`	Gradient background layer. `border-radius: 999px`, `overflow: hidden`. Holds the gradient texture.
`pillButton__flash`	White overlay element used for the press flash effect.
`pillButton__flash--active`	Modifier that triggers a 100 ms opacity transition on the flash overlay.
`pillButton__label`	Text label element centered over the button.

Events

Name	Description	Arguments
`Clicked`	Fired when the button is tapped or clicked. The flash animation plays before this event is dispatched.	none

Methods

Signature	Description
`SetInnerColor(string hex)`	Sets the inner (left-edge) gradient color using a hex string (e.g. `"#e94560"`). Rebuilds the gradient texture.
`SetOuterColor(string hex)`	Sets the outer (right-edge) gradient color using a hex string. Rebuilds the gradient texture.
`SetTextColor(Color color)`	Sets the label text color.
`SetFontSize(float size)`	Sets the label font size in pixels.

Usage

Add the control to your scene using:

GameObject -> UI Toolkit -> Extensions -> Pill Button

This creates a UIDocument in the scene (plus a PanelSettings with the default runtime theme, if the project has none) and assigns an editable starter template with demo content, copied to Assets/UI Toolkit Extensions.

A starter template can also be added to an existing document using:

Assets -> Create -> UI Toolkit -> Extensions -> Pill Button Starter

Alternatively, drag the control into a document from the UI Builder Library (Project -> Custom Controls -> UnityUIToolkit.Extensions) or declare it directly in UXML:

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:ext="UnityUIToolkit.Extensions" editor-extension-mode="False">
    <ext:PillButton text="Click Me!" inner-color="#4A90E2" outer-color="#7B68EE" />
</ui:UXML>

The shared extensions stylesheet is applied automatically when the control is created in the Editor and in Play Mode, so no manual stylesheet reference is needed while authoring. The starter templates also reference the stylesheet explicitly, which covers player builds; for hand-written UXML or code-first UI in builds, add the stylesheet to your UXML or panel theme.

Using the Control

Primary CTA

using UnityEngine;
using UnityEngine.UIElements;
using UnityUIToolkit.Extensions;

public class OnboardingFooterController : MonoBehaviour
{
    [SerializeField] private UIDocument _document;

    private PillButton _continueButton;

    private void OnEnable()
    {
        var root = _document.rootVisualElement;

        _continueButton = new PillButton();
        _continueButton.Text = "Continue";
        _continueButton.SetInnerColor("#e94560");
        _continueButton.SetOuterColor("#9b1d35");
        _continueButton.SetTextColor(Color.white);
        _continueButton.SetFontSize(16f);

        _continueButton.Clicked += OnContinueTapped;

        root.Q<VisualElement>("footer").Add(_continueButton);
    }

    private void OnContinueTapped()
    {
        Debug.Log("Continue tapped");
    }
}

Dynamic Color Update

// Reflect form validity through button color
private void UpdateButtonState(bool isValid)
{
    if (isValid)
    {
        _continueButton.SetInnerColor("#18cc6e");
        _continueButton.SetOuterColor("#0d7a42");
        _continueButton.Text = "Submit";
    }
    else
    {
        _continueButton.SetInnerColor("#555555");
        _continueButton.SetOuterColor("#333333");
        _continueButton.Text = "Fill all fields";
    }
}

Example Scenes

This control is demonstrated in the following package examples:

Credits and Donation

SimonDarksideJ

External links

UI Toolkit Extensions repository

OpenUPM package

Demonstrated In

Action Menu — Anchored overflow menus — per-row ··· triggers and a centered card menu, with callback and dismiss handling.
Content Explorer — A full content-browsing screen that composes scroll-snap, collapsible sections, inputs, a loading state and toasts into one layout.
Dropdown Phone Entry — A phone-number entry form that pairs a country-code dropdown picker with pill input fields.
Image Crop Overlay — Pick an avatar image, then pan, pinch-zoom and crop it inside a full-screen modal overlay.
Notification List — A scrollable notification feed with unread-count badges and an elastic, swipe-to-load-more list.
Registration Form — A complete mobile-style registration flow with input validation and shake feedback on errors.
Scroll Snap & Dots — A paged onboarding carousel — a swipeable scroll-snap container kept in sync with page-dot indicators.
Social Links — An editable social-links section with add/remove rows and a platform picker that hides already-used platforms.
Step Wizard — A multi-step wizard flow with a step progress bar and per-step inputs.
Toast Notifications — Queued toast messages with swipe-to-dismiss gesture handling.

Contents