@wedgekit/info-button
v2.0.3
Published
## Purpose
Downloads
35
Maintainers
Keywords
Readme
InfoButton
Purpose
The InfoButton
component provides context to other components displayed on the page. Users can pass in descriptive paragraphs and even link to external documentation for further clarity.
When using an InfoButton
in a form the user may wish to make the InfoButton function similar to a disabled
component. It is recommended you pass in a tabIndex
of -1
and style accordingly using the color
prop.
Example
import InfoButon from '@wedgekit/info-button';
const App = () => {
const info = {
title: 'Branch ID',
content:
'Please enter your Branch ID here. If you do not know your Branch ID, please contact DMSi support',
link: {
label: 'Contact DMSi',
url: 'https://www.dmsi.com/contact-us/',
},
};
return <InfoButton info={info} />;
};
render(<App />);
Props
info
Required: ✅
Type: InfoObject
type InfoObject = {
title: string;
content?: string;
icon?: IconTag;
iconColor?: ColorTag;
background?: ColorTag;
link?: {
url: string; // The href for the `<a>` element
label: string; // The display text for the `<a>` element
};
};
title
Required: ✅
Type: string
Descriptive text to give the user context, appears in the 'header' of the info dialog. For styling purposes, title
is a styled <h3>
tag.
content
Required: ❌
Type: string
Further descriptive text, appears in the 'body' of the info dialog. If no info.content
is provided, the info dialog will not have a 'body'. For styling purposes, content
is a styled <p>
tag.
link
Required: ❌
type: { url: string, label: string }
The url and display text for an <a>
element to link to more documentation. Appears in the footer of the info dialog. If no info.link
is provided, the info dialog will not have a 'footer'.
icon
Type: IconTag
Required: ❌
Default: 'info'
Used to select a @wedgekit/icon.
iconColor
type: ColorTag
Required: ❌
Default: 'N600'
Color for the 'fill' of the Icon svg
background
type: ColorTag
Required: ❌
Default: 'N050'
Color for the background of the IconButton div
popoverClassName
Type: string
Required: ❌
Opens the consumed popover for styling purposes
tabIndex
Type: number
Required: ❌
Property used to really font keyboard users
onClick
type: (e) => void
Required: ❌
Optional callback that fires when the Info IconButton is clicked.
onExit
type: (e) => void
Required: ❌
Optional callback that fires when exiting the Info dialog