--- title: "List Badge | Explore SwiftUI" description: "Generates a badge for the view from an integer value. Learn how to use List Badge in SwiftUI with visual code examples." canonical_url: "https://exploreswiftui.com/library/list/list-badge" meta: author: "Explore SwiftUI" "og:description": "Generates a badge for the view from an integer value. Learn how to use List Badge in SwiftUI with visual code examples." "og:image": "https://exploreswiftui.com/_og/d/c_Component%2Ctitle_List%2BBadge%2Cdescription_Generates%2Ba%2Bbadge%2Bfor%2Bthe%2Bview%2Bfrom%2Ban%2Binteger%2Bvalue.%2Ccategory_List%2Cimage_~L2FwaS9pbWFnZXMvMTIzL3ZhcmlhbnRzLzM0OT92PTE3OTAwNzM0Nzg4NDImcj0yJnc9MTI4MCZxPTg1JmY9anBlZw%2CimageMode_crop%2CimagePosition_center%2CimageFrame_~cG9zaXRpb246IGFic29sdXRlOyByaWdodDogMDsgd2lkdGg6IDY0MHB4OyBoZWlnaHQ6IDQ4MHB4OyBkaXNwbGF5OiBmbGV4OyBvdmVyZmxvdzogaGlkZGVuOyBiYWNrZ3JvdW5kOiAjRkZGRkZGOyBib3gtc2hhZG93OiAwIC0xMHB4IDUwcHggcmdiYSgzNyw5OSwyMzUsMC4xOCk7IGJvcmRlci1sZWZ0OiAxcHggc29saWQgcmdiYSgwLDAsMCwwLjA2KTsgdG9wOiA3NXB4OyBib3JkZXItdG9wOiAxcHggc29saWQgcmdiYSgwLDAsMCwwLjA2KTsgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkIHJnYmEoMCwwLDAsMC4wNik7IGJvcmRlci10b3AtbGVmdC1yYWRpdXM6IDMycHg7IGJvcmRlci1ib3R0b20tbGVmdC1yYWRpdXM6IDMycHg7%2Cprops_eyJwbGF0Zm9ybXMiOlsiaU9TIiwiaVBhZE9TIiwibWFjT1MiLCJ2aXNpb25PUyJdfQ%2Cp_Ii9saWJyYXJ5L2xpc3QvbGlzdC1iYWRnZSI%2Cs_L0jtMFiSOQocXbwT.png" "og:image:height": "630" "og:image:type": image/png "og:image:width": "1200" "og:title": "List Badge | Explore SwiftUI" "twitter:description": "Generates a badge for the view from an integer value. Learn how to use List Badge in SwiftUI with visual code examples." "twitter:image": "https://exploreswiftui.com/_og/d/c_Component%2Ctitle_List%2BBadge%2Cdescription_Generates%2Ba%2Bbadge%2Bfor%2Bthe%2Bview%2Bfrom%2Ban%2Binteger%2Bvalue.%2Ccategory_List%2Cimage_~L2FwaS9pbWFnZXMvMTIzL3ZhcmlhbnRzLzM0OT92PTE3OTAwNzM0Nzg4NDImcj0yJnc9MTI4MCZxPTg1JmY9anBlZw%2CimageMode_crop%2CimagePosition_center%2CimageFrame_~cG9zaXRpb246IGFic29sdXRlOyByaWdodDogMDsgd2lkdGg6IDY0MHB4OyBoZWlnaHQ6IDQ4MHB4OyBkaXNwbGF5OiBmbGV4OyBvdmVyZmxvdzogaGlkZGVuOyBiYWNrZ3JvdW5kOiAjRkZGRkZGOyBib3gtc2hhZG93OiAwIC0xMHB4IDUwcHggcmdiYSgzNyw5OSwyMzUsMC4xOCk7IGJvcmRlci1sZWZ0OiAxcHggc29saWQgcmdiYSgwLDAsMCwwLjA2KTsgdG9wOiA3NXB4OyBib3JkZXItdG9wOiAxcHggc29saWQgcmdiYSgwLDAsMCwwLjA2KTsgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkIHJnYmEoMCwwLDAsMC4wNik7IGJvcmRlci10b3AtbGVmdC1yYWRpdXM6IDMycHg7IGJvcmRlci1ib3R0b20tbGVmdC1yYWRpdXM6IDMycHg7%2Cprops_eyJwbGF0Zm9ybXMiOlsiaU9TIiwiaVBhZE9TIiwibWFjT1MiLCJ2aXNpb25PUyJdfQ%2Cp_Ii9saWJyYXJ5L2xpc3QvbGlzdC1iYWRnZSI%2Cs_L0jtMFiSOQocXbwT.png" "twitter:title": "List Badge | Explore SwiftUI" --- > Index of every page on this site: [llms.txt](https://exploreswiftui.com/llms.txt) **Interactive previews**[ iPhone](https://exploreswiftui.com/iphone?element=123) # **List Badge** Generates a badge for the view from an integer value. ![List Badge - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview](https://exploreswiftui.com/api/images/123/variants/349?v=1790073478842&r=2&w=800&q=80&f=webp) ### **Platform Compatibility** iOS 15..0+ iPadOS 15.0+ macOS 12.0+ visionOS 1.0+ ### **Tags** ### **SwiftUI Code** [ Docs]() ``` List { Section("Header") { Text("Foo") .badge("1") Text("Bar") .badge(2) } } ``` ### **Found an issue or have a suggestion?** Created: August 10, 2025Updated: August 10, 2025 ![Connect Wizard](https://exploreswiftui.com/_ipx/f_webp&q_80&s_48x48/images/connect-wizard-icon.png) **Connect Wizard** **Unlock insights App Store Connect doesn’t show you.** [** Get Started **](https://apps.apple.com/app/apple-store/id6747314580?pt=121213751&ct=Explore%20SwiftUI%20Banner&mt=8) ### **More List Components ** [**View all **](https://exploreswiftui.com/library/list) ![Outline Group - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview](https://exploreswiftui.com/api/images/132/variants/371?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Outline Group** A structure that computes views and disclosure groups on demand from an underlying collection of tree-structured, identified data. ![Disclosure Group - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview](https://exploreswiftui.com/api/images/131/variants/363?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Disclosure Group** A view that shows or hides another content view, based on the state of a disclosure control. ![Edit Button - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview](https://exploreswiftui.com/api/images/130/variants/367?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Edit Button** A button that toggles the edit mode environment value. ![Section Index Label and Visibility - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/129/variants/369?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Section Index Label and Visibility** Sets the label that is used in a section index to point to this section, typically only a single character long. Changes the visibility of the list section index. ![Move Disabled - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview](https://exploreswiftui.com/api/images/128/variants/361?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Move Disabled** Adds a condition for whether the view’s view hierarchy is movable. ![Delete Disabled - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview](https://exploreswiftui.com/api/images/127/variants/351?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Delete Disabled** Adds a condition for whether the view’s view hierarchy is deletable. ![Refreshable List - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview](https://exploreswiftui.com/api/images/126/variants/359?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Refreshable List** Marks this view as refreshable. ![Swipe Action - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview](https://exploreswiftui.com/api/images/125/variants/357?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Swipe Action** Adds custom swipe actions to a row in a list. ### **Explore Other Components ** [**Browse all **](https://exploreswiftui.com/) ![Sheet Background Interaction - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/140/variants/434?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Sheet Background Interaction** Controls whether people can interact with the view behind a presentation. ![PaletteControlGroupStyle - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/57/variants/49?v=1790073478842&r=2&w=412&q=75&f=webp) ### **PaletteControlGroupStyle** A control group style that presents its content as a palette. ![PageTabViewStyle - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/161/variants/685?v=1790073478842&r=2&w=412&q=75&f=webp) ### **PageTabViewStyle** A TabViewStyle that displays a paged scrolling TabView. ![Background Extension Effect - iPadOS - Landscape - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/91/variants/422?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Background Extension Effect** Adds the background extension effect to the view. The view will be duplicated into mirrored copies which will be placed around the view on any edge with available safe area. Additionally, a blur effect will be applied on top to blur out the copies ![Swipe Action - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/200/variants/322?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Swipe Action** Adds custom swipe actions to a row in a list or container, notifying you when the actions are revealed or dismissed. ![Manage Subscriptions Sheet - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/223/variants/241?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Manage Subscriptions Sheet** Opens the manage subscriptions sheet. ![Navigation Split View Container Background - iPadOS - Landscape - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/173/variants/430?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Navigation Split View Container Background** A background placement behind the content of a NavigationSplitView. ![Tab View Side Bar Footer - iPadOS - Landscape - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/168/variants/735?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Tab View Side Bar Footer** Adds a custom footer to the sidebar of a tab view. ```json {"@context":"https://schema.org","@graph":[{"@id":"https://exploreswiftui.com/#website","@type":"WebSite","description":"A visual library for SwiftUI APIs, components, and modifiers","inLanguage":"en-US","name":"Explore SwiftUI","url":"https://exploreswiftui.com/","publisher":{"@id":"https://exploreswiftui.com/#identity"}},{"@id":"https://exploreswiftui.com/library/list/list-badge#webpage","@type":"WebPage","dateModified":"2025-08-10T16:53:04.597Z","datePublished":"2025-08-10T16:53:04.597Z","description":"Generates a badge for the view from an integer value. Learn how to use List Badge in SwiftUI with visual code examples.","name":"List Badge","url":"https://exploreswiftui.com/library/list/list-badge","breadcrumb":{"@id":"https://exploreswiftui.com/library/list/list-badge#breadcrumb"},"isPartOf":{"@id":"https://exploreswiftui.com/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://exploreswiftui.com/library/list/list-badge"]}],"primaryImageOfPage":{"@id":"https://exploreswiftui.com/#logo"}},{"@id":"https://exploreswiftui.com/#identity","@type":"Organization","description":"A visual library for SwiftUI APIs, components, and modifiers","name":"Explore SwiftUI","url":"https://exploreswiftui.com","logo":{"@id":"https://exploreswiftui.com/#logo"},"sameAs":["https://x.com/Typ0genius","https://mastodon.social/@Typ0genius"]},{"@id":"https://exploreswiftui.com/library/list/list-badge#article","dateModified":"2025-08-10T16:53:04.597Z","datePublished":"2025-08-10T16:53:04.597Z","description":"Generates a badge for the view from an integer value. Learn how to use List Badge in SwiftUI with visual code examples.","headline":"List Badge","inLanguage":"en-US","name":"List Badge","thumbnailUrl":"https://exploreswiftui.com/api/images/123/variants/349?v=1790073478842&r=2","url":"https://exploreswiftui.com/library/list/list-badge","@type":["Article","TechArticle"],"about":{"@type":"Thing","name":"SwiftUI"},"author":{"@id":"https://exploreswiftui.com/#identity"},"image":{"@id":"https://exploreswiftui.com/#/schema/image/1"},"isPartOf":{"@type":"WebSite","name":"Explore SwiftUI","url":"https://exploreswiftui.com"},"mainEntityOfPage":{"@id":"https://exploreswiftui.com/library/list/list-badge#webpage"},"publisher":{"@id":"https://exploreswiftui.com/#identity"}},{"@id":"https://exploreswiftui.com/library/list/list-badge#/schema/software-source-code/1","@type":"SoftwareSourceCode","codeRepository":"https://developer.apple.com/documentation/swiftui/view/badge(_:)","codeSampleType":"full example","description":"Generates a badge for the view from an integer value. Learn how to use List Badge in SwiftUI with visual code examples.","name":"List Badge SwiftUI Example","programmingLanguage":"Swift","runtimePlatform":"SwiftUI","text":"List {\n Section(\"Header\") {\n Text(\"Foo\")\n .badge(\"1\")\n Text(\"Bar\")\n .badge(2)\n }\n}","about":[{"@type":"Thing","name":"SwiftUI"},{"@type":"Thing","name":"List"},{"@type":"Thing","name":"List Badge"}]},{"@id":"https://exploreswiftui.com/library/list/list-badge#breadcrumb","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","name":"Home","item":"https://exploreswiftui.com","position":1},{"@type":"ListItem","name":"List","item":"https://exploreswiftui.com/library/list","position":2},{"@type":"ListItem","name":"List Badge","item":"https://exploreswiftui.com/library/list/list-badge","position":3}]},{"@id":"https://exploreswiftui.com/#logo","@type":"ImageObject","caption":"Explore SwiftUI","contentUrl":"https://exploreswiftui.com/apple-touch-icon.png","inLanguage":"en","url":"https://exploreswiftui.com/apple-touch-icon.png"},{"@id":"https://exploreswiftui.com/#/schema/image/1","@type":"ImageObject","contentUrl":"https://exploreswiftui.com/api/images/123/variants/349?v=1790073478842&r=2","inLanguage":"en","url":"https://exploreswiftui.com/api/images/123/variants/349?v=1790073478842&r=2"}]} ```