UI Kit Components

Accordion

The Accordion component allows you to create collapsible sections that can be expanded or collapsed by clicking on their titles.

import { Accordion } from "@helpscout/ui-kit";

<Accordion>
  <Accordion.Section id="section1" title="Section 1">
    Content for section 1.
  </Accordion.Section>
  <Accordion.Section id="section2" title="Section 2">
    Content for section 2.
  </Accordion.Section>
</Accordion>
Prop Type Description Default
children React.ReactNode Component children. Should be one or multiple Accordion.Section components, boolean, or undefined.  
className string Custom class names to be added to the component (optional).  
expandedSectionIds string[] An array of ids corresponding to sections that should be expanded on initialization (optional).  
duration number Time (ms) for the expand/collapse animation (optional). 300
allowMultiple boolean Allows multiple sections to be expanded simultaneously by clicking their titles (optional). false
seamless boolean Exclude borders and horizontal padding (optional). false
onSectionClick (id: string, expanded: boolean, event: MouseEvent) => void Callback function when a section is clicked. Gives access to the section id clicked, whether it is expanded, and the click event (optional).  

Badge

The Badge component displays a small count and status descriptor for UI elements.

import { Badge } from "@helpscout/ui-kit";

<Badge status="success">4</Badge>
Prop Type Description Default
children React.ReactNode The content that will be displayed within the badge. Typically a number or count.  
className string Custom class names to be added to the component (optional).  
small boolean If true, the badge will be displayed at a smaller size (optional). false
status ‘error’ | ‘info’ | ‘success’ | ‘warning’ Changes the color of the badge to match the corresponding status (optional).  

The Badge component accepts a status prop, which can be ‘error’, ‘info’, ‘success’, or ‘warning’, to change the badge color accordingly. You can also use the small prop to display the badge at a smaller size.

Button

The Button component renders a clickable button with various styles and options.

import { Button } from "@helpscout/ui-kit";

<Button onClick={() => console.log("Clicked!")}>Click me!</Button>
Prop Type Description Default
className string Custom class names to be added to the component (optional).  
disabled boolean Disable the button so it can’t be clicked (optional). false
loading boolean Renders a loading Spinner (optional). false
fullwidth boolean Renders a full-width button (optional). false
onBlur (event: FocusEvent) => void Callback function when the component is blurred (optional).  
onClick (event: MouseEvent) => void Callback function when the component is clicked (optional).  
onFocus (event: FocusEvent) => void Callback function when the component is focused (optional).  
size ‘xxs’ | ‘xs’ | ‘sm’ | ‘md’ Sets the size of the button (optional). ‘md’
styled ‘default’ | ‘linked’ | ‘outlined’ Tweaks the button style (optional). ‘default’
submit boolean Sets the type of the button to "submit" (optional). false
theme ‘blue’ | ‘grey’ | ‘red’ Applies a theme-based style to the button. ‘blue’

DefaultStyle

The DefaultStyle component sets global styles for the application.

import { DefaultStyle } from "@helpscout/ui-kit";

<DefaultStyle />;
Prop Type Description Default
fontFamily string The global font family that will be assigned to the --HSUIKitFontFamily variable (optional).  
fontFamilySystem string The font family that will be assigned to the --HSUIKitFontFamilySystem variable (optional).  
fontFamilyMono string The font family that will be assigned to the --HSUIKitFontFamilyMono variable (optional).  
fontSize string The global font size that will be assigned to the --HSUIKitFontSize variable. It is used to set the base font size (optional).  

Heading

The Heading component renders a text heading with various levels, sizes, and weights.

import { Heading } from "@helpscout/ui-kit";

<Heading level="h1">This is a heading</Heading>
Prop Type Description Default
className string Custom class names to be added to the component (optional).  
level string Choose heading level. Options: ‘h1’, ‘h2’ (optional). ‘h1’
state string Changes the text color based on state. Options: ‘default’, ‘danger’, ‘warning’, ‘success’ (optional) ‘default’

Icon

The Icon component renders an icon with various sizes, shades, and states.

import { Icon } from "@helpscout/ui-kit";

<Icon name="hs-logo" size={14} />
Prop Type Description Default
className string Custom class names to be added to the component (optional).  
name string The name of the icon to render. Refer to the UI Kit documentation for a list of available icon names.  
size number Adjusts the size of the component. Options: 8, 10, 12, 13, 14, 15, 16, 18, 20, 24, 32, 48, 52, 72 (optional).  
shade string Changes icon grayscale shade. Options: ‘default’, ‘subtle’, ‘slightlyMuted’, ‘muted’, ‘faint’, ‘extraMuted’ (optional).  
state string Changes icon color to represent a state. Options: ‘default’, ‘error’, ‘success’, ‘warning’ (optional, takes precedence over shade).  

The Link component renders a styled anchor element with various options for interaction.

import { Link } from "@helpscout/ui-kit";

<Link href="https://www.example.com">Visit example.com</Link>
Prop Type Description Default
className string Custom class names to be added to the component (optional).  
href string Address for the link (optional). #
onBlur (event: FocusEvent) => void Callback function when the component is blurred (optional).  
onClick (event: MouseEvent) => void Callback function when the component is clicked (optional).  
onFocus (event: FocusEvent) => void Callback function when the component is focused (optional).  
rel string rel HTML attribute (optional).  
target string target HTML attribute (optional).  

List

The List component renders an unordered or ordered list with different list styles.

import { List } from "@helpscout/ui-kit";

<List type="bullet">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</List>
Prop Type Description Default
children React.ReactNode Component children, should be one or multiple <li> elements (optional).  
className string Custom class names to be added to the component (optional).  
type string List style for the items. Options: ‘bullet’, ‘inline’, ‘number’ (optional). ‘bullet’

Spinner

The Spinner component renders a loading spinner with customizable color and speed.

import { Spinner } from "@helpscout/ui-kit";

<Spinner color="#3498db" speed={500} />
Prop Type Description Default
className string Custom class names to be added to the component (optional).  
color string Color of the spinner (optional).  
speed number Speed of the spinning animation (in ms, optional).  

Text

The Text component renders a text block with various size, shade, state, and weight options.

import { Text } from "@helpscout/ui-kit";

<Text size={16} weight={500}>This is some text</Text>
Prop Type Description Default
className string Custom class names to be added to the component (optional).  
weight string Adjust text weight. Options: ‘regular’, ‘medium’ (optional). ‘medium’
state string Changes the text color based on state. Options: ‘default’, ‘danger’, ‘warning’, ‘success’ (optional) ‘default’
↑Back to top
© Help Scout 2024