Sentre Legacy
  • 🥳Welcome
  • Getting Started
  • DApp Manifest
  • Folder Structure
  • Available Scripts
  • Development
    • View
    • Model & Controllers
    • Providers
      • UI Provider
      • Wallet Provider
      • Account Provider
      • Mint Provider
    • Static
    • Global variables
    • Configs
  • Advanced Usage
    • ☀️Theme
    • 👘Customizing Styles
    • 🪝Hooks
  • 🤩Submitting DApps
  • References
  • Best Practices
  • Troubleshoots
  • 🎨Design Pricinples
    • Button
    • Card
    • Checkbox
    • Color
    • Corner radius
    • Drawer
    • Dropdown
    • Grid
    • Icons
    • Input
    • List
    • Menu
    • Modal
    • Radio
    • Select
    • Shadow
    • Spacing
    • Switch
    • Tabs
    • Tooltip
    • Table
    • Typography
  • 📄Litepaper
    • Introduction
    • Industry Problems
    • Sentre: An All-in-one Solution
      • The Open Protocol
      • Liquidity Efficiency
    • SEN as the Heart of the Ecosystem
      • Asymmetric Deposit
      • Adaptive Fee Model
      • The Triad Pool
      • Simulated Mesh Trading
      • Token Use Cases
    • Conclusion
Powered by GitBook
On this page
  • Usage
  • Specs
  • Sample code
  1. Design Pricinples

Button

Buttons allow users to take actions, and make choices, with a single tap.

PreviousDesign PricinplesNextCard

Last updated 3 years ago

Usage

A button means an operation (or a series of operations). Clicking a button will trigger corresponding business logic.

In SenOS we provide 3 types of button:

  • Primary button: indicate the main action, one primary button at most in one section.

  • Default button: indicate a series of actions without.

  • Text button: used for the most secondary action.

And 3 states:

  • Hover: used for the action of putting the mouse pointer on the button.

  • Pressed: used for button click action.

  • Disabled: when actions are not available.

Specs

We provide 3 sizes of button:

  • Large

  • Default

  • Small

Sample code

// Some code

🎨