Skip to content
Paramanu v0.1.0-alpha.0

Inline Message

InlineMsg displays compact feedback within forms or content areas, ideal for field validation hints.

Basic Usage

This field is required.
import { InlineMsg } from "@paramanu/feedback-react"


export default function App() {
return <InlineMsg variant="info">This field is required.</InlineMsg>
}
<div class="pm-inline-msg pm-inline-msg--info pm-inline-msg--md" role="status">
<div class="pm-inline-msg__content">This field is required.</div>
</div>

Variants

Info
Success
import { InlineMsg } from "@paramanu/feedback-react"


export default function App() {
return (
  <div style={{ display: "flex", flexDirection: "column", gap: "4px" }}>
    <InlineMsg variant="info">Info</InlineMsg>
    <InlineMsg variant="success">Success</InlineMsg>
    <InlineMsg variant="warning">Warning</InlineMsg>
    <InlineMsg variant="danger">Danger</InlineMsg>
  </div>
)
}
<div style="display: flex; flex-direction: column; gap: 4px;">
<div class="pm-inline-msg pm-inline-msg--info pm-inline-msg--md" role="status"><div class="pm-inline-msg__content">Info</div></div>
<div class="pm-inline-msg pm-inline-msg--success pm-inline-msg--md" role="status"><div class="pm-inline-msg__content">Success</div></div>
<div class="pm-inline-msg pm-inline-msg--warning pm-inline-msg--md" role="alert"><div class="pm-inline-msg__content">Warning</div></div>
<div class="pm-inline-msg pm-inline-msg--danger pm-inline-msg--md" role="alert"><div class="pm-inline-msg__content">Danger</div></div>
</div>