DocumentationDocumentationBlogBlogShowcaseShowcase
GitHubGitHub (opens in a new tab)DiscordDiscord (opens in a new tab)
  • Introduction
  • Installation
  • Theming
  • Playground
  • Brands
  • Figma
  • Frameworks
    • Create React App
    • React Native
    • Next.js (App Router)
    • Next.js (Pages Router)
    • Gatsby
  • Components
    • React Avatar component
    • React Badge component
    • React Button component
    • React Checkbox component
    • React Collapse component
    • React Drawer component
    • React Dropdown component
    • React Entity component
    • React Error component
    • React Fieldset component
    • React Footer component
    • React Grid component
    • React Highlight component
    • React Icon component
    • React Image component
    • React Input component
    • React Link component
    • React Menu component
    • React Modal component
    • React Note component
    • React Progress component
    • React Scroller component
    • React Select component
    • React Skeleton component
    • React Snippet component
    • React Spacer component
    • React Spinner component
    • React Switch component
    • React Tabs component
    • React Text component
    • React Textarea component
    • React Toast component
    • React Toggle component
    • React Tooltip component
  • Hooks
    • Accessing and managing themes in React and Kitchn
    • Controlling modal visibility in React
    • Copying text to clipboard in React with error handling
    • Creating and managing portals in React
    • Detecting outside clicks in React components
    • Detecting server vs. browser environments in React
    • Handling global clicks in React components
    • Handling keyboard events with custom key bindings in React
    • Handling viewport breakpoints in React for responsive design
    • Handling window resize events in React
    • Logging warnings with traceability in React
    • Managing checkbox state in React
    • Managing combobox state and visibility in React
    • Managing DOM element position and dimensions in React
    • Managing toast notifications in React
    • Media queries in React for responsive design
    • Observing DOM element changes in React
    • State management with mutable refs in React
    • Tracking previous state or prop values in React
  • API Reference (opens in a new tab)
  • Roadmap (opens in a new tab)
  • Contributing
  • Acknowledgements

On This Page

  • Default
  • Variants
  • Sizes
Question? Give us feedback → (opens in a new tab)Edit this page on GitHub
Documentation
Components
React Badge component

Badge

Display an indicator that requires attention.

Default

Variants

Sizes

React Avatar componentReact Button component
  • Ticketing
  • Order Kiosk
  • Agency
  • Social
  • Jobs
  • Artists
  • Promoters
  • Suppliers
  • Venues
  • Developers
  • Help Center
  • Community
  • Design
  • Status
  • Comparison
  • About
  • News
  • Careers
  • Contact Us
  • onRuntime Studio
  • Open Source
  • Partners
  • Privacy
  • Terms
  • Company Details
© 2023 Tonight Pass. All rights reserved.