Complete :: Badge :: Paper Components

- Default
- With Icons
- With Icon And Suffix
- Sectioned
- With Destructive Item
- With Help Text
- With Prefix And Suffix
- Basic
- Multiselect
- Preselected
- Remote
- Multiple Sections
- Empty State
- Event Handler
- Default
- Extra Small
- Square
- Initials
- Image
- Default
- Informational
- Success
- Attention
- Warning
- Critical
- Incomplete
- Partially Complete
- Complete
- Default
- Dismissible
- With Actions
- Informational
- Success
- Warning
- Critical
- Within Card
- Horizontal
- Vertical
- Special Direction
- Color
- Border Width
- Border Radius
- Padding
- Shadow
- Basic
- Outline
- Outline Monochrome
- Plain
- Plain Monochrome
- Plain Monochrome No Underline
- Plain Destructive
- Primary
- Destructive
- Slim
- Large
- Full Width
- Text Aligned
- Pressed
- Disclosure
- Disabled
- Disable With Actions
- Disable With Loader
- Loading
- Text With Icon
- Icon Only
- With Icon Name
- External
- Default
- Segmented
- Outline Segmented
- Connected Tops
- Full Width
- With Text Item
- With Plain Item
- Nowrap
- Default
- With Secondary Action
- Dismissible
Caption
- Default
- Card With Header Actions
- Card With Footer Actions
- Card With Custom Footer Actions
- Card With Destructive Footer Action
- Card With Multiple Sections
- Card With Multiple Titled Sections
- Card Section With Action
- Card With Subsection
- Card Section With Destructive Action
- Card With Subdued Section
- Subdued Card For Secondary Content
- Card With Separate Header
- Card With All Of Its Elements
- Card With Flushed Sections
- Unsectioned Content
- Unstyled Section
- Section With Borders
- Default
- With Help Text
- With Error
- Indeterminate
- Single Choice
- Single Choice With Error
- Multi Choice
- With Children Content Always Rendered
Collapsible
- Default
- Full Width
- With Flush Content
- Default
- Sortable
- With Footer
- With Totals In Footer
- With Row Links
- Increased Density
- Default
- Tight Spacing
- Extra Large
- Large
- Medium
- Small
Divider
- With File Upload
- With A Label
- With Image Upload
- With Single File Upload
- With Drop On Page
- Accepts Only Svg Files
- With Custom File Dialog Trigger
- With Custom File Button
- Without Preview
- Medium Sized
- Small Sized
Empty Search Results
- Default
- With Subdued Footer
- Full Width
- Unsectioned Content
Exception List
- With Resource List
- With Data Table
- With Custom Content
- Disabled
- With Help Text
- Without Query
- With Tags
Footer Help
- Text Field
- Select
- Check Box
- Radio Button
- Errors
- Dropzone
- Default
- Field Group
- Condensed Group
Frame
- Default
- Paragraph
- Gap
- Column Width
- Number Of Columns
- Non Wrapping
- Gap
- Block Align
- Align
- Default
- Colored
- With Backdrop
- With Custom Svg
- With Custom Svg And Color
Index Table
- Default
- Non Wrapping
- Gap
- Vertical Alignment
- Horizontal Alignment
Inline Error
Keyboard Key
- One Column Layout
- Two Columns With Primary And Secondary Widths
- Two Columns With Equal Width
- Three Columns With Equal Width
- Four Columns With Equal Width
- Annotated Layout
- Annotated Layout With Sections
- Annotated Layout With Banner At The Top
- Mixed Layout
- Default
- Monochrome
- Monochrome In Banner
- External
- No Underline
- Bulleted
- Numbered
- Extra Tight
- Basic
- Large
- Small
- Custom Close Button
- Multiple Sections
- With Primary Action
- Without Title
- Default
- Multiple Sections
- Sub Items
- With Active Items
- With Disabled Items
- With External Items
- With Secondary Action
- With Section Separator
- Single Choice
- Multi Choice
- Custom Content
- With Sections
- In Popover
- Default
- With All Header Elements
- Without Primary Action
- With Destructive Secondary Action
- With Subtitle
- With External Link
- Full Width
- Narrow Width
- With Action Group
- Without Header
- With Title Metadata
- With Divider
- With Custom Action
- Default
- Primary Only
- Default
- With Label
- With Action List
- With Content And Actions
- With Form
- With Custom Activator
- Appended To Body
- Default
- Small Progress Bar
- Colored Progress Bars
- Non Animated Progress Bar
- Default
- With Help Text
- Default
- With Link
- With Checkbox
- With Radio
- With Media
- With Vertical Alignment
- With Selected
- Simple List
- With Total Resource Count
- With Shortcut Actions
- With Persistent Shortcut Actions
- Default
- With Shadows
- Default
- Inline Label
- Label Action
- Required
- Disabled
- With Help Text
- With Error
- With Inline Error
Setting Toggle
- Default
- With Auto Detection
- Default
- Single Line
- Small
- Medium
- Large
- Extra Large
- Dynamic Content
- Static Content
- Medium
- Large
- Small
- Vertical
- Horizontal
- Default
- Small
- Default
- Non Wraping
- Loose Spacing
- Vertically Centered
- Fill Space Proportionally
- Fill Space Evenly
- Fill Remaining Space
- Default
- Paragraph
- Default
- Fitted
- With Badge
- Default
- Disabled
- With Remove Button
- Clickable
- Default
- Body
- Align
- Weight
- Color
- Default
- Tight Text
- Loose Text
- Default
- Number
- Email
- Multiline
- With Hidden Label
- With Label Action
- With Right Aligned Text
- With Placeholder Text
- With Help Text
- With Prefix Or Suffix
- With Connected Fields
- With Error
- With Inline Error
- Disabled
- Readonly
- With Character Count
- With Clear Button
- With Monospaced Font
- Subdued
- Strong
- Positive
- Negative
- Code
- Shortcuts
- Small
- Default
- Small
- Large
- With Icon
- Basic
- Multiple
- Custom Duration
- With Action
- Error
- Long Page
- Multiline
- Default
- Inside Paragraph
- Button
- Link
- Mail Link
- Gap
- Align
- Inline Align
Visually Hidden

<span class="Polaris-Badge Polaris-Badge--progressComplete">
<span class="Polaris-Badge__PipContainer">
  <span class="Polaris-Badge-Pip Polaris-Badge-Pip--progressComplete">
    <span class="Polaris-Text--root Polaris-Text--bodyMd Polaris-Text--regular Polaris-Text--visuallyHidden">
      Complete
    </span>
  </span>    </span>
<span class="Polaris-Text--root Polaris-Text--bodySm Polaris-Text--regular">
  Fulfilled
</span></span>

<%= paper_badge(progress: :complete) { "Fulfilled" } %>

Embed Code

what's this?

<lookbook-embed app="https://papercomponents.com/lookbook/" preview="BadgeComponentPreview" scenario="complete"></lookbook-embed>

Embed URL

what's this?

https://papercomponents.com/lookbook/embed?props=%7B%22preview%22%3A%22BadgeComponentPreview%22%2C%22scenario%22%3A%22complete%22%7D

Previews

No matching results.