Get started
Brand
Foundations
Tokens
Components
Content
Patterns
Resources
Search
Theme
Site navigation
Open search
Theme
Components
App provider
Beta
Atlassian navigation
Avatar
Expand Avatar menu
Avatar item
Avatar skeleton
Avatar group
Badge
Banner
Blanket
Breadcrumbs
Button
Expand Button menu
Icon button
Link button
Link icon button
Split button
Button group
Button (legacy)
Caution
Calendar
Checkbox
Code
Expand Code menu
Code block
Comment
Date time picker
Expand Date time picker menu
Date picker
Time picker
Drawer
Dropdown menu
Expand Dropdown menu menu
Dropdown item
Dropdown item checkbox
Dropdown item radio
Dynamic table
Empty state
Flag
Expand Flag menu
Auto dismiss flag
Flag group
Flags provider
Focus ring
Form
Heading
Beta
Icon
Alpha
Expand Icon menu
Icon (legacy)
Icon tile
Alpha
Custom icon (legacy)
Custom SVG
Icon object
Image
Beta
Inline dialog
Caution
Inline edit
Expand Inline edit menu
Inline editable textfield
Inline message
Layout grid
Deprecated
Link
Logo
Lozenge
Menu
Modal dialog
Onboarding (spotlight)
Expand Onboarding (spotlight) menu
Benefits modal
Spotlight card
Page
Caution
Expand Page menu
Grid
Grid column
Page header
Page layout
Pagination
Popup
Progress bar
Expand Progress bar menu
Success progress bar
Transparent progress bar
Progress indicator
Progress tracker
Radio
Expand Radio menu
Radio group
Range
Section message
Select
Expand Select menu
Async creatable select
Async select
Checkbox select
Country select
Creatable select
Popup select
Radio select
Side navigation
Spinner
Table tree
Tabs
Tag
Tag group
Text area
Text field
Toggle
Tooltip
Visually hidden
Primitives
Overview
Box
Inline
Stack
Flex
Beta
Grid
Beta
Bleed
XCSS
Caution
Responsive
Expand Responsive menu
Show
Hide
Breakpoints
Text
Beta
Pressable
Anchor
Libraries
CSS
Beta
CSS reset
Design tokens
Motion
Expand Motion menu
Accessibility
Entering motions
Resizing motions
Variables
Popper
Portal
Pragmatic drag and drop
Expand Pragmatic drag and drop menu
Examples
Tutorial
Core package
Expand Core package menu
Adapters
Expand Adapters menu
Element
Text selection
External
Drop targets
Monitors
Utilities
Events
Reconciliation
UI frameworks
Recipes
Expand Recipes menu
Isolating experiences
Typing data
Virtualization
Deferred loading
Testing
Upgrade guides
Changelog
Optional packages
Expand Optional packages menu
Flourish
Expand Flourish menu
Trigger post move flash
React accessibility
Expand React accessibility menu
Drag handle button
Hitbox
React drop indicator
Auto scroll
Live region
React beautiful dnd migration
React beautiful dnd autoscroll
Unit testing
Web platform design constraints
Design guidelines
Accessibility guidelines
Tooling
ESLint plugin
Expand ESLint plugin menu
Consistent css prop usage
Ensure design token usage
Ensure design token usage preview
Ensure icon color
Icon label
No banned imports
No css tagged template expression
No custom icons
No dark theme vr tests
No deprecated apis
No deprecated design token usage
No deprecated imports
No direct use of web platform drag and drop
No empty styled expression
No exported css
No exported keyframes
No html anchor
No html button
No invalid css map
No keyframes tagged template expression
No legacy icons
No margin
No nested styles
No physical properties
No separator with list elements
No styled tagged template expression
No unsafe design token usage
No unsafe style overrides
No unsupported drag and drop libraries
Prefer primitives
Use button group label
Use drawer label
Use heading
Use heading level in spotlight card
Use href in link item
Use latest xcss syntax
Use latest xcss syntax typography
Use menu section title
Use onboarding spotlight label
Use popup label
Use primitives
Use primitives text
Use tag group label
Use tokens space
Use tokens typography
Use visually hidden
Storybook addon
Stylelint plugin
UI Styling Standard
Expand UI Styling Standard menu
Atlaskit theme
Consistent css prop usage
Convert props syntax
Enforce style prop
Local cx xcss
No array arguments
No classname prop
No container queries
No css tagged template expression
No dynamic styles
No empty styled expression
No exported css
No exported keyframes
No exported styles
No global styles
No important styles
No imported style values
No invalid css map
No keyframes tagged template expression
No nested selectors
No styled
No styled tagged template expression
No unsafe selectors
No unsafe values
Use compiled
Toggle
A toggle is used to view or switch between enabled or disabled states.
Was this page helpful?
Yes
No
We use this feedback to improve our documentation.
Back to top