Siticone Logo
Siticone UI
DOCS
v2025.12.15
Docs Dashboard Button

Siticone Dashboard Button

The SiticoneDashboardButton is a feature-rich navigation control designed for building modern, responsive sidebar menus and application dashboards. It features a selection state system, image support, multi-line text with descriptions, notification badges, and a comprehensive theming engine with gradient and animation support.

Selection & Grouping

Controls how the button behaves within a menu group.

Property Type Description & Usage Example
IsSelected bool dashBtn.IsSelected = true; Determines if the button is in the active state. Setting this to true triggers selection animations (color transition, indicator slide-in).
ButtonGroup string dashBtn.ButtonGroup = "SidebarMenu"; Assigns the button to a logical group. When one button in a group is selected, all others in the same group (within the same parent container) are automatically deselected.

Content: Image & Text

Configuration for the button's label, description, and icon.

Property Type Description & Usage Example
Text string dashBtn.Text = "Dashboard"; The primary label text.
DescriptionText string dashBtn.DescriptionText = "View analytics"; A secondary line of text displayed below the main label. Useful for adding context or subtitles.
Image Image dashBtn.Image = Resources.HomeIcon; The icon image displayed on the button.
ImageAlign ContentAlignment dashBtn.ImageAlign = ContentAlignment.MiddleLeft; Controls the position of the image relative to the button bounds.
ImageSize Size dashBtn.ImageSize = new Size(24, 24); The render size of the image.
ImagePadding int dashBtn.ImagePadding = 12; Spacing between the image and the text.
TextPadding int dashBtn.TextPadding = 15; Horizontal padding from the button edge to the content start.

Colors & States

Extensive color customization for every interaction state.

Property Type Description & Usage Example
NormalColor Color dashBtn.NormalColor = Color.Transparent;
HoverColor Color dashBtn.HoverColor = Color.WhiteSmoke;
PressColor Color dashBtn.PressColor = Color.LightGray;
SelectedColor Color dashBtn.SelectedColor = Color.AliceBlue; Background color when IsSelected is true.
TextColor Color dashBtn.TextColor = Color.Black;
SelectedTextColor Color dashBtn.SelectedTextColor = Color.Blue;
DescriptionColor Color dashBtn.DescriptionColor = Color.Gray;
SelectedDescriptionColor Color dashBtn.SelectedDescriptionColor = Color.DarkBlue;

Selection Indicator

Settings for the vertical bar that appears when selected.

Property Type Description & Usage Example
ShowLeftIndicator bool dashBtn.ShowLeftIndicator = true; Toggles the visibility of the vertical accent bar on the left.
IndicatorWidth int dashBtn.IndicatorWidth = 4; Thickness of the indicator bar in pixels.
IndicatorColor Color dashBtn.IndicatorColor = Color.Blue;
IndicatorGradientColor Color dashBtn.IndicatorGradientColor = Color.LightBlue; If set, creates a vertical gradient on the indicator bar.

Notification Badge

Built-in system for displaying alerts or counts.

Property Type Description & Usage Example
ShowBadge bool dashBtn.ShowBadge = true; Toggles visibility of the badge.
BadgeCount int dashBtn.BadgeCount = 5; Number to display. Values > 99 show as "99+".
BadgeColor Color dashBtn.BadgeColor = Color.Red;
BadgeTextColor Color dashBtn.BadgeTextColor = Color.White;

Gradient Backgrounds

Advanced background styling options.

Property Type Description & Usage Example
UseGradientBackground bool dashBtn.UseGradientBackground = true; Enables gradient fill instead of solid colors.
GradientStartColor Color dashBtn.GradientStartColor = Color.Blue;
GradientEndColor Color dashBtn.GradientEndColor = Color.Cyan;
GradientMode LinearGradientMode dashBtn.GradientMode = LinearGradientMode.Horizontal;

Animation & Performance

Settings for visual smoothness and optimization.

Property Type Description & Usage Example
AnimationSpeed float dashBtn.AnimationSpeed = 0.1f; Controls the speed of color transitions and indicator slides.
EnableRippleEffect bool dashBtn.EnableRippleEffect = true; Enables material-design ripple on click.
RippleColor Color dashBtn.RippleColor = Color.White;
UltraPerformanceMode bool dashBtn.UltraPerformanceMode = true; Disables all animations (ripples, fades, slides) for maximum rendering speed. Ideal for lists with many buttons.

Events

Interaction Events
// Fired when the user performs a long press (hold down)
dashBtn.LongPressed += (s, e) => 
{
                MessageBox.Show("Long Press Detected!");
};

// Fired when the user double taps/clicks the button
dashBtn.DoubleTapped += (s, e) => 
{
                Debug.WriteLine("Double Tap!");
};

// Fired when the user clicks directly on the notification badge
dashBtn.BadgeClicked += (s, e) => 
{
                OpenNotificationsPanel();
};

// Request to update badge count (useful for data binding scenarios)
dashBtn.BadgeUpdateRequested += (s, e) => 
{
    e.NewCount = GetUnreadCount();
    e.Animate = true;
};

Public Methods

UpdateBadge(int count, bool animate)
// Programmatically update the badge count with animation control.
// This fires the BadgeUpdateRequested event internally.
dashBtn.UpdateBadge(5, true);

Designer Support

The control includes a Smart Tag panel for rapid configuration.

Category Features
Theme Presets Quickly apply styles: Modern Blue, Dark, Light, Gradient, Material, Colorful, Minimal.
Corner Presets Presets for Rounded, Left Rounded, Right Rounded, and Square corners.
Utilities Configure Notification Badge: Sets up a sample badge.
Toggle Selected State: Previews the selected state in the designer.
Ultra Performance Mode: Quickly toggles optimization.

Detailed Examples

Example 1: Sidebar Navigation

Setting up a standard sidebar menu with grouping.

C# - Sidebar Setup
public void InitializeSidebar()
{
                var btnHome = new SiticoneDashboardButton { Text = "Home", ButtonGroup = "Main" };
                var btnSettings = new SiticoneDashboardButton { Text = "Settings", ButtonGroup = "Main" };
    
    btnHome.IsSelected = true; // Automatically deselects others in "Main" group
    
    btnHome.Click += (s, e) => LoadPage("Home");
    btnSettings.Click += (s, e) => LoadPage("Settings");
}

Example 2: User Profile Button

Using image and description text for a richer button.

C# - Profile Button
public void SetupProfileButton()
{
    btnProfile.Text = "John Doe";
    btnProfile.DescriptionText = "Administrator";
    btnProfile.Image = Resources.UserAvatar;
    btnProfile.ImageSize = new Size(40, 40);
    
                // Style adjustments
    btnProfile.Height = 60;
    btnProfile.ShowLeftIndicator = false;
    btnProfile.CornerRadiusTopLeft = 30; // Rounded pill shape
    btnProfile.CornerRadiusBottomRight = 30;
}

Example 3: Dynamic Notifications

Updating the badge based on real-time data.

C# - Notifications
public void OnNewMessageReceived(int unreadCount)
{
    btnMessages.UpdateBadge(unreadCount, animate: true);
    
                if (unreadCount > 0)
    {
        btnMessages.BadgeColor = Color.Red;
        btnMessages.BadgeTextColor = Color.White;
    }
                else
    {
        btnMessages.ShowBadge = false;
    }
}