diff --git a/src/stories/components/label-value/LabelValue.mdx b/src/stories/components/label-value/LabelValue.mdx index 8b19d1169..1e63b958b 100644 --- a/src/stories/components/label-value/LabelValue.mdx +++ b/src/stories/components/label-value/LabelValue.mdx @@ -21,6 +21,14 @@ Label values can also include an icon to the left of the label. This is useful f +## Inline + +Label values can also be displayed inline. + + + +> **Note:** When using multiple inline label values, it's common practice to set a fixed width on the label to ensure that the values are aligned. + ## API diff --git a/src/stories/components/label-value/LabelValue.stories.ts b/src/stories/components/label-value/LabelValue.stories.ts index deb02d076..b33459ccb 100644 --- a/src/stories/components/label-value/LabelValue.stories.ts +++ b/src/stories/components/label-value/LabelValue.stories.ts @@ -65,6 +65,13 @@ export const Icon: Story = { } }; +export const Inline: Story = { + ...standaloneStoryParams, + args: { + inline: true + } +}; + export const CSSOnly: Story = { args: { withIcon: false