HashiCorp Design System

Index
01-testing-normal-folder
02_testing-folder_with_underscore
- Test-file
03-test-folder-with-hds-components
- Test-backing-class
- Test-showcase
04-mock-states
- Showcase
Components
- Alert
- Avatar
- Badge
- Badge-count
- Breadcrumb
- Button
- Button-set
- Card
- Dropdown
- Empty-state
- Form
  - Base-elements
  - Checkbox
  - Radio
  - Radio-card
  - Select
  - Text-input
  - Textarea
  - Toggle
- Icon-tile
- Link
  - Inline
  - Standalone
- Stepper
- Tabs
- Tag
- Toast
Content
- Writing-guidelines
  - 11--generic
Foundations
- Colors
  - 03--how-to-use
  - 12--generic
- Elevation
- Focus-ring
  - 03--how-to-use
  - 06--showcase
- Tokens
  - 03--how-to-use
  - 12--generic
- Typography
Overrides
- Power-select
Utilities
- Disclosure
- Interactive

Badge component - How to use

Invocation of the component would look something like this:

Success badge

<Hds::Badge @text="Success badge" @color="success" @type="outlined" />

FOOTER HERE