DIGIT Core
PlatformDomainsAcademyDesign SystemFeedback
2.9-LTS
2.9-LTS
  • 🖥️Platform
    • Overview
    • Why DIGIT?
    • Principles
    • Architecture
      • Service Architecture
      • Technology Architecture
        • Open Source Tools
      • Infrastructure Architecture
      • Deployment Architecture
    • API Specifications
      • Access Control
      • Boundary
      • Document Uploader
      • Encryption
      • File Store
      • ID Generation
      • Indexer
      • Localisation
      • Master Data Management
      • OTP
      • Payment Gateway
      • PDF Generation
      • URL Shortner
      • WhatsApp Chatbot
      • Workflow
    • Core Services
      • Access Control Services
      • Audit Service
        • Signed Audit Performance Testing Results
      • API Gateway
        • Configuring Gateway Rate Limiting
      • Boundary Service
        • Migrate Old Boundary Data - Steps
      • Email Notification Service
      • Encryption Service
        • Encryption Client Library
        • User Data Security Architecture
        • Guidelines for supporting User Privacy in a module
      • FileStore Service
      • ID Generation Service
      • Indexer Service
        • Indexer Configuration
      • Internal Gateway
      • Location
      • Localization Service
        • Configuring Localization
          • Setup Base Product Localisation
          • Configure SMS and Email
      • MDMS V2 (Master Data Management Service)
        • Adopt New MDMS - Steps
        • MDMS (Master Data Management Service)
          • Setting up Master Data
            • MDMS Overview
            • MDMS Rewritten
            • Configuring Tenants
            • Configuring Master Data
            • Adding New Master
            • State Level Vs City Level Master
        • MDMS Migration
      • OTP Service
      • Payment Gateway Service
      • PDF Generation Service
      • Persister Service
        • Persister Configuration
      • Service Request
      • SMS Notification Service
        • Setting Up SMS Gateway
          • Using The Generic GET & POST SMS Gateway Interface
      • User
        • User Session Management
      • User OTP Service
      • URL Shortening Service
      • Workflow
        • Setting Up Workflows
        • Configuring Workflows For An Entity
        • Workflow Auto Escalation
        • Migration To Workflow 2.0
      • Libraries
        • Tracer Library
        • Encryption Client
      • Accelerators
        • Inbox Service
    • DIGIT: How-Tos
      • SMS Template Approval Process
      • Notification Enhancement Based On Different Channel
    • Releases
      • DIGIT 2.9 LTS
        • Test Automation
        • Release Checklist
        • Service Build Updates
          • Hotfix
        • Test Cases
        • Automated DIGIT Deployment
        • Upgrade Guide: Transitioning DIGIT Modules to Spring Boot Version 3.2.2
        • Postgres Upgrade: Service Code Changes
        • Updating RDS Version in AWS
        • LTS DIGIT Migration - v2.8 To v2.9
        • Changelog
        • Backup PostgreSQL Database In AWS - Steps
    • Source Code
  • 📓Guides
    • Installation Guide
      • Infrastructure Setup
        • AWS
          • 1. Pre-requisites
          • 2. Setup AWS Account
          • 3. Provision Infrastructure
          • FAQ
        • Azure
          • 1. Azure Pre-requisites
          • 2. Understanding AKS
          • 3. Infra-as-code (Terraform)
        • SDC
          • 1. SDC Pre-requisites
          • 2. Infra-as-code (Kubespray)
          • CI/CD Setup On SDC
        • CI/CD Set Up
          • CI/CD Build Job Pipeline Setup
      • DIGIT Deployment
        • Full Deployment
          • Deploy DIGIT
            • Prepare Deployment Configuration
        • Full Deployment (Beta)
          • Creating New HelmChart
          • Prepare Helm Release Chart
      • Quick Setup (AWS)
    • Data Setup Guide
      • Bootstrap DIGIT
      • Productionize DIGIT
      • User Module
      • Localisation Module
      • Location Module
      • MDMS - V2
    • Design Guide
      • Model Requirements
      • Design Services
      • Design User Interface
      • Checklists
    • Developer Guide
      • Pre-requisites Training Resources
      • Backend Developer Guide
        • Section 0: Prep
          • Development Pre-requisites
          • Design Inputs
            • High Level Design
            • Low Level Design
          • Development Environment Setup
        • Section 1: Create Project
          • Generate Project Using API Specs
          • Create Database
          • Configure Application Properties
          • Import Core Models
          • Implement Repository Layer
          • Create Validation & Enrichment Layers
          • Implement Service Layer
          • Build The Web Layer
        • Section 2: Integrate Persister & Kafka
          • Add Kafka Configuration
          • Implement Kafka Producer & Consumer
          • Add Persister Configuration
          • Enable Signed Audit
        • Section 3: Integrate Microservices
          • Integrate IDGen Service
          • Integrate User Service
          • Add MDMS Configuration
          • Integrate MDMS Service
          • Add Workflow Configuration
          • Integrate Workflow Service
          • Integrate URL Shortener Service
        • Section 4: Integrate Billing & Payment
          • Custom Calculator Service
          • Integrate Calculator Service
          • Payment Back Update
        • Section 5: Other Advanced Integrations
          • Add Indexer Configuration
          • Certificate Generation
        • Section 6: Run Final Application
        • Section 7: Build & Deploy Instructions
        • FAQs
      • UI Developer Guide
        • DIGIT-UI
          • UI Components Standardisation
            • DIGIT UI Core React Components
            • DIGIT UI Core Flutter Components
              • Input Field
              • Radio
              • Toggle
              • Button
              • Dropdown
              • Checkbox
              • Toast
              • Info Card
            • DIGIT UI Components v0.2.0
              • Foundation
                • Typography
                • Colour Pallete
                • Spacer
              • Atom
                • Accordion
                • Button
                • Checkbox
        • DIGIT UI Development Pre-requisites
        • UI Configuration (DevOps)
        • Local Development Setup
        • Run Application
        • Build & Deploy
        • Pre-defined Screens In DIGIT-UI
          • Create Screen (FormComposer)
          • Inbox/Search Screen
          • Workflow Component
        • Create a New UI Module/Package
          • Project Structure
          • Install Dependency
          • Module.js
          • Import Required Components
          • Common Hooks
        • Employee Module Setup
          • Write Employee Module Code
          • Create Form - Create Screen
        • Citizen Module Setup
          • Sample screenshots
          • Citizen Landing Screen
          • Write Citizen Module Code
        • Customisation
          • Integrate External Web Application/UI With DIGIT UI
          • Utility - Pre-Process MDMS Configuration
          • CSS Customisation
          • Kibana Dashboard Integration With DSS Module
          • Login Page
        • Setup Monitoring Tools
        • Android Web View & How To Generate APK
        • FAQs
          • Troubleshoot Using Browser Network Tab
          • Debug Android App Using Chrome Browser
      • Flutter (Mobile App) UI Developer Guide
        • Introduction to Flutter
          • Flutter - Key Features
          • Flutter Architecture & Approach
          • Flutter Pre-Requisites
        • Setup Development Environment
          • Flutter Installation & Setup Guide
          • Setup Device Emulators/Simulators
          • Run Application
        • Build User Interfaces
          • Create Form Screen
        • Build Deploy & Publish
          • Build & Deploy Flutter Web Application
          • Generate Android APKs & App Bundles
          • Publishing App Bundle To Play Store
        • State Management With Provider & Bloc
          • Provider State Management
          • BloC State Management
        • Best Practices & Tips
        • Troubleshooting
    • Operations Guide
      • DIGIT - Infra Overview
      • Kubernetes
        • RBAC Management
        • Database Dump - Playground
      • Setup Jenkins - Docker way
      • GitOps
        • Git Client installation
        • GitHub organization creation
        • Adding new SSH key to it
        • GitHub repo creation
        • GitHub Team creation
        • Enabling Branch protection:
        • CODEOWNER Reviewers
        • Adding Users to the Git
        • Setting up an OAuth with GitHub
        • Fork (Fork the mdms,config repo with a tenant-specific branch)
      • Working with Kubernetes
        • Installation of Kubectl
      • Containerizing application using Docker
        • Creation of Dockerhub account
      • Infra Provisioning Using Terraform
        • Installation of Terraform
      • Customise Existing Terraform Templates
      • Cert-Manager
        • Obtaining SSL certificates with the help of cluster-issuer
      • Moving Docker Images
      • Pre and post deployment checklist
      • Multi-tenancy Setup
      • Availability
        • Infrastructure
        • Backbone services
          • Database
          • Kafka
          • Kafka Connect
          • Elastic search
            • Elastic Search Rolling Upgrade
            • ElasticSearch Direct Upgrade
        • Core services
        • DIGIT apps
        • DSS dashboard
      • Observability
        • ES-Curator - Clear Old Logs/indices
        • Monitoring
        • Environment Changes
        • Tracing
        • Jaeger Tracing Setup
        • Logging
        • eGov Monitoring & Alerting Setup
        • eGov Logging Setup
      • Performance
        • What to monitor?
          • Infrastructure
          • Backbone services
          • Core services
        • Identifying bottlenecks
        • Solutions
      • Handling errors
      • Security
      • Reliability and disaster recovery
      • Privacy
      • Skillsets/hiring
      • Incident management processes
      • Kafka Troubleshooting Guide
        • How to clean up Kafka logs
        • How to change or reset consumer offset in Kafka?
      • SRE Rituals
      • FAQs
        • I am unable to login to the citizen or employee portal. The UI shows a spinner.
        • My DSS dashboard is not reflecting accurate numbers? What can I do?
      • Deployment using helm
        • Helm Installation
        • Helm chart creation
        • Helm chart customization
      • How to Dump Elasticsearch Indexes
      • Deploy Nginx-Ingress-Controller
      • Deployment Job Pipeline Setup
      • OAuth2-Proxy Setup
      • Jira Ticket Creation
    • Implementation Guide
    • Security & Privacy Guide
      • Security & Privacy Guidelines For Product Developers
      • Security & Privacy Guidelines For Solution Implementing Agencies
      • Security & Privacy Guidelines For Program Owners
  • 🚀Accelerators
    • UI Frameworks
      • Service Build Updates
    • Integrations
      • Payment
      • Notification
      • Transaction
      • Verification
      • View
      • Calculation
    • Concepts
      • Deployment - Key Concepts
        • Security Practices
        • Readiness & Liveness
        • Resource Requests & Limits
        • Deploying DIGIT Services
        • Deployment Architecture
        • Routing Traffic
        • Backbone Deployment
    • API Playground
    • Sandbox
    • Checklists
      • API Checklist
      • Security Checklist
        • Security Guidelines Handbook
        • Security Flow - Exemplar
      • Performance Checklist
      • Deployment Checklist
    • Contribute
    • Discussion Board
    • Academy
    • Events
Powered by GitBook

All content on this page by eGov Foundation is licensed under a Creative Commons Attribution 4.0 International License.

On this page
  • Anatomy
  • Variants
  • Properties
  • Property Configuration Table
  • Behaviours
  • Usage Guide
  • Content Guidelines
  • Change log
  • Design Checklist

Was this helpful?

  1. Guides
  2. Developer Guide
  3. UI Developer Guide
  4. DIGIT-UI
  5. UI Components Standardisation
  6. DIGIT UI Components v0.2.0
  7. Atom

Button

Design System - Button component

PreviousAccordionNextCheckbox

Last updated 3 months ago

Was this helpful?

The Button is a basic interactive element used to perform actions or navigate within an app. It helps users complete tasks like submitting forms, starting processes, or opening pages, making it an essential part of any interface.

// Sample code

<Button 
  icon="CheckCircle" 
  label={t("Label")} 
  title={t("LabelMore")} 
  onClick={() => console.log("clicked")} 
  type="button" 
  variation="primary" 
/>
// Sample code

DigitButton(
          label: Primary Button,
          onPressed: () {},
          type: DigitButtonType.primary,
          isDisabled: false,
          size: DigitButtonSize.small
          suffixIcon: Icons.home,
        );

Anatomy


Variants


Primary

The primary button is the default action button and is used for the most prominent action on a page or view. It uses a solid fill color to stand out. Only one primary button should appear per view to maintain a clear focus and hierarchy. Use it thoughtfully to avoid overwhelming users or diluting its importance.

Secondary The secondary button communicates a moderate level of emphasis and is intended for actions that complement the primary or accent actions in a view. With a simple stroke and no fill, it maintains a clean and subtle appearance. These buttons are typically used for secondary tasks or options that provide additional functionality but are not critical to the core experience.

Tertiary

The tertiary button is a minimal, text-only variant designed for actions with less prominence in the overall hierarchy. It is used for secondary or supportive actions that complement primary tasks.

Link The link button communicates navigation or secondary actions and is represented as text with an underline. Use link buttons to direct users to related content, additional resources, or less critical actions without disrupting the visual hierarchy of the page.

Properties

Label This property represents the text displayed inside the button. It is a required field and helps users understand the action that the button will trigger. The label should be concise and clear to communicate the button’s purpose effectively.

Disabled The “isDisabled” property disables the button, preventing any user interaction. It also applies a disabled visual style (like graying out the button) to indicate that the button is not active.

Icon The icon property specifies the name of the icon to be rendered inside the button. This helps provide a visual cue along with the button text. The icon placement can be either before or after the label based on the how the “Prefix” and “Suffix” properties are defined.

Size The size property specifies the size of the button. You can choose between "large", "medium", and "small" to adjust the button's height and font size.

Type The type property determines the HTML type attribute for the button, such as "submit", "button", or "actionButton". This is useful for form submission or defining button behavior in HTML forms.

Property Configuration Table

Each design component offers a range of configurable options. These options are intentionally platform-agnostic, allowing implementations to adapt and tailor them to align with the specific requirements of the chosen framework.

Property
Value
Default

label

string

-

variation

string

primary

iconFill

string

-

isDisabled

boolean

-

type

string

-

icon

string

-

size

string

large

ref

reference to a DOM element

-

className

string

-

submit

string

-

formId

string

-

onClick

function

-

title

string

-

style

object

-

isSuffix

boolean

-

textStyles

object

-

hideDefaultActionIcon

boolean

-

options

array

-

isSearchable

boolean

-

optionsKey

string

-

menuStyles

object

-

showBottom

boolean

-

onOptionSelect

function

-

Property
Value
Default

label

String

required

onPressed

VoidCallBack Function

-

type

ButtonType(primary, secondary, tertiary, link)

-primary by default

size

ButtonSize(large, medium, small)

large by default

prefixIcon

IconData

-

suffixIcon

IconData

-

buttonTheme

DefaultButtonTheme

-

isDisabled

bool

false

capitalizedLetters

bool

true

Behaviours


Hover State

When a user hovers over the button, a visual cue is added to emphasize interactivity. This is achieved by introducing a subtle line below the button. The line appears as a clean, horizontal underline that complements the button's style, without overwhelming the design. The hover state enhances the button's affordance, guiding users and improving interactivity without altering the button’s primary layout or design.

Mousedown State

The Mouse Down state of the button represents the moment when the user clicks and holds the button. This state provides immediate feedback to the user, confirming that their interaction has been registered. The text label becomes bolder, emphasizing the active interaction

Flexible Width

The width of the button adjusts to the length of the text. This behaviour is dynamic with respect to the character limit defined. There is no text overflow in buttons.

Character Limit

The default character limit for buttons is set to 64 characters to promote clear and concise actionable labels.

Truncated Label

If the label is too long to fit within the button, it will be truncated. The full text will be displayed on hover for web and on long press for mobile interfaces.

Usage Guide


Use icons only when necessary

Add icons to buttons only when they provide meaningful context or reinforce the action. Icons should be highly relevant and improve user understanding.



Never include icons purely for visual appeal or without a clear purpose. Decorative icons can confuse users and detract from the button's functionality.

Do not override button colour

Do not use custom colors for buttons. The colors of different button variations have been designed to be consistent and accessible.

Content Guidelines

Concise and actionable labels

Button labels should be clear, concise, and action-oriented to help users understand their purpose instantly. Instead of words which are not verbs like "My Bills" or "Inbox," use specific phrases like "Download Bills " or "View Application" that tell users what will happen when clicked. 



Avoid unnecessary words that clutter the label—brevity improves readability and reduces cognitive load. Labels should also align with user expectations; for example, a delete action should say "Delete" instead of "Remove" if deletion is permanent. 




Casing

Use ‘Titlecase’ for buttons. This means capitalising the first letter of all words, except for articles and conjunctions. Eg. “Submit Feedback”, “Create Account”, “Learn More.”



Title case enhances the emphasis of actions at the same time ensuring accessibility and readability. There can be exception to this casing definition if the action is a sentence.

Change log


Date
Number
Notes

Design Checklist


All interactive states Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).

Accessible use of colours Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).

Accessible contrast for text Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).

Accessible contrast for UI components Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).

Keyboard interactions Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).

Screen reader accessible All content, including headings, labels, and descriptions, is meaningful, concise, contextual and accessible by screen readers.

Responsive for all breakpoints Responsiveness for 3 breakpoints - Mobile, Tablet and Desktop

Usage guidelines Includes a list of dos and don'ts that highlight best practices and common mistakes.

Content guidelines Content standards and usage guidelines for writing and formatting in-product content for the component.

Defined variants and properties Includes relevant variants and properties (style, size, orientation, optional iconography, decorative elements, selection states, error states...etc)

Defined behaviors Guidelines for keyboard navigation and focus, layout management (including wrapping, truncation, and overflow), animations, and user interactions.

Design Kit Access to the design file for the component in Figma multiple options, states, color themes, and platform scales.

📓
https://www.figma.com/design/sH2pLZBXZZ6c7LlfQwFFjR/Design-System?node-id=10013-14407&t=bXeR2K2cY0SyAPnC-0www.figma.com