Skip to main content
Buttons are essential interactive elements that enable users to trigger actions, navigate between sections, and upload files. FlowX.AI provides two specialized button types, each optimized for specific use cases with extensive customization options.
Button types overview

​
Button types overview

Choose the right button type for your specific use case:

Basic Button

Trigger actions like process advancement, sending notifications, or opening new content

File Upload Button

Enable file selection with built-in validation for file types and sizes

​
Basic button

Basic buttons serve as the primary interaction mechanism for users to perform actions within your application. They can trigger process flows, send notifications, navigate to different sections, or execute business logic.

​
Configuration overview

Properties

Labels and basic settings

UI Actions

Event handling and action types

Styling

Visual appearance and icons

​
Basic button properties

Purpose: Define the text displayed on the buttonFeatures:
  • Supports Markdown syntax for rich formatting
  • Dynamic text from process data
  • Localization support for multi-language applications
  • Responsive text scaling
Best Practices:
  • Use action-oriented language (“Submit”, “Continue”, “Send”)
  • Keep labels concise but descriptive
  • Consider button context and user expectations
  • Use consistent terminology across the application
Action buttons should clearly indicate what will happen when clicked. Use verbs like “Save Changes” instead of generic terms like “OK”.

​
UI actions configuration

Define the behavior when users interact with your button:
  • Event Types
  • Action Types
  • Advanced Configuration
EventDescriptionUse Cases
CLICKTriggered when button is clicked/tappedAll button interactions
While CLICK is the primary event, the action type determines what happens when the event occurs.

​
Button styling & visual design

​
Button types

Choose from four distinct visual styles to match your design system:
  • Primary
  • Secondary
  • Ghost
  • Text
Purpose: Main call-to-action buttonsCharacteristics:
  • High contrast, prominent appearance
  • Usually one per screen/section
  • Draws immediate attention
Use Cases: Submit forms, confirm actions, proceed to next step
Button type demonstration
For comprehensive CSS styling options, check our Styling Guide.

​
Icon integration

Enhance your buttons with meaningful icons:
Icon Key: Select from the Media Library
  • Consistent icon set across the application
  • SVG format for scalability
  • Optimized for different screen sizes
Icon Color: Customize appearance
  • Use color picker for precise control
  • Maintain accessibility contrast ratios
  • Consider colorblind accessibility
When setting colors, the entire icon fill changes. Avoid color modifications on multicolor icons to prevent visual distortion.
Available Positions:
PositionDescriptionVisual ResultBest For
LeftIcon before text🔍 SearchMost common layout
RightIcon after textSubmit ➤Directional actions
CenterIcon only🔍Icon-only buttons
When using center position, the button displays only the icon. Ensure the icon clearly communicates the action to maintain usability.
Icon-only button example

​
File upload button

File upload buttons provide a specialized interface for file selection with built-in validation and user feedback. They’re essential for document submission, image uploads, and data import workflows.

​
Configuration overview

File upload buttons share many properties with basic buttons but include specialized file handling features:

File Properties

File type restrictions and validation

Validation

Size limits and error handling

User Experience

Feedback and progress indication

​
File upload properties

Purpose: Clearly indicate the upload purposeExamples:
  • “Upload Document”
  • “Select Profile Picture”
  • “Import Data File”
  • “Attach Receipt”
Best Practices:
  • Specify what type of file is expected
  • Include file requirements in the label if space allows
  • Use progressive disclosure for complex requirements
Purpose: Control which file types users can selectConfiguration Options:
SpecificationExamplePurpose
MIME Categoriesaudio/*, image/*, video/*Broad category filtering
Specific MIME Typesapplication/pdf, text/csvExact format control
File Extensions.doc, .docx, .jpg, .pngUser-friendly restrictions
Common Combinations:
Images: image/*, .jpg, .jpeg, .png, .gif, .webp
Documents: .pdf, .doc, .docx, .txt, .rtf
Spreadsheets: .xls, .xlsx, .csv
Archives: .zip, .rar, .7z
Be specific about accepted file types to prevent user confusion and reduce invalid uploads.
Max File Size: Set appropriate limits based on:
  • Server capacity and processing power
  • Network bandwidth considerations
  • Storage limitations
  • User experience expectations
Size Guidelines:
  • Images: 5-10 MB for high quality
  • Documents: 25-50 MB for complex files
  • Data Files: Based on processing requirements
  • Media Files: 100+ MB for videos
Error Messages: Provide clear feedback
  • “File size must be under 10 MB”
  • “Please compress your image and try again”
  • “Large files may take longer to process”
Invalid File Type Error: Custom messages for unsupported formats
  • Explain what formats are accepted
  • Provide guidance on file conversion
  • Link to help resources if needed
Max File Size Error: Clear size limit communication
  • Display the exact limit
  • Suggest file compression tools
  • Offer alternative upload methods for large files
Example Configuration:
Invalid Type: "Please upload PDF, DOC, or DOCX files only"
Size Error: "File must be smaller than 25 MB. Current size: 35 MB"

​
File upload example

Example configuration for an image upload button:
File upload example
Configuration Details:
  • Accepted Types: image/* (all image formats)
  • Max Size: 5 MB
  • Error Handling: Custom messages for type and size violations
  • UI Feedback: Progress indication and preview capabilities

​
File upload UI actions

Event Type: CLICK (same as basic buttons)Action Types for File Upload:
  • File Processing: Validate, resize, or convert files
  • Progress Tracking: Show upload progress and status
  • Data Integration: Process file content into application data
  • Workflow Advancement: Continue process after successful upload
File upload action configuration
Multi-file Support: Configure for multiple file selection
  • Batch processing capabilities
  • Individual file validation
  • Progress tracking for each file
File Preview: Show file information before upload
  • File name and size display
  • Image thumbnails for visual files
  • File type icons for documents
Upload Progress: Provide user feedback
  • Progress bars for large files
  • Cancel upload functionality
  • Retry mechanisms for failed uploads

​
File upload styling

File upload buttons have specialized styling options:
  • Button Types
  • Icon & Layout
  • Responsive Sizing
TypeAppearanceBest Used For
FillSolid backgroundPrimary upload actions
GhostOutlined styleSecondary upload options
TextText-only appearanceSubtle upload links

​
Best practices

Accessibility

  • Use descriptive labels that explain the button’s purpose
  • Ensure sufficient color contrast for all button states
  • Provide keyboard navigation support
  • Include ARIA labels for screen readers
  • Test with assistive technologies
  • Consider users with motor impairments (adequate button size)

User Experience

  • Place primary actions prominently and consistently
  • Use loading states for actions that take time
  • Provide clear feedback for successful/failed actions
  • Group related buttons logically
  • Avoid too many competing call-to-action buttons
  • Consider touch targets for mobile users (minimum 44px)

Visual Design

  • Maintain consistent button styling across the application
  • Use button hierarchy to guide user attention
  • Choose icons that are universally understood
  • Test button visibility in different lighting conditions
  • Consider color-blind users when relying on color alone
  • Ensure buttons look clickable and interactive

Performance

  • Optimize file upload handling for large files
  • Implement proper error handling and retry mechanisms
  • Provide progress feedback for long-running actions
  • Cache frequently used icons and styling
  • Test button responsiveness under load
  • Consider offline scenarios for critical actions

​
Common use cases

​
Basic button scenarios

Use CaseButton TypeIcon SuggestionAction Type
Form SubmissionPrimary✓ (checkmark)Process advancement
Cancel OperationSecondary✕ (close)Navigation back
Delete ItemGhost🗑 (trash)Data operation
View DetailsText👁 (eye)Navigation
Save DraftSecondary💾 (save)Data operation

​
File upload scenarios

Use CaseFile TypesSize LimitValidation Notes
Profile Photoimage/*5 MBSquare aspect ratio preferred
Document Upload.pdf,.doc,.docx25 MBOCR processing available
Data Import.csv,.xlsx50 MBColumn validation required
Media Galleryimage/*,video/*100 MBThumbnail generation
Backup Files.zip,.rar500 MBVirus scanning enabled

​
Platform considerations

  • Web Applications
  • Mobile Applications
  • Cross-Platform
Enhanced Features:
  • Drag and drop file upload support
  • Keyboard shortcuts for common actions
  • Hover states and advanced animations
  • Context menus for additional options
  • Multi-file selection capabilities
⌘I