This is a glossary of the most common prop/slot names used throughout the Intelligence Community UI Kit.
To help explain usage, each prop has the most common type options and a description, and each slot has the expected slotted content and a description.
| Prop name | Most common type options | Description |
|---|---|---|
| accessibleLabel | string | Extra context to apply to the component for use with a screen reader |
| additionalFieldDisplay | "static", "dynamic" | How an additional field would present itself within the component |
| aligned | "center", "left", "right", "full-width" | The alignment of the component |
| announced | boolean | Changes the component's role to get announced to a screen reader |
| appearance | "default", "dark", "light" | The main colour used for the component |
| appTitle | string | The title text for the component |
| checked | boolean | The selected state of the component |
| contentAligned | "center", "left" | The alignment of content within the component |
| debounce | number | The wait time in milliseconds before a change event is triggered |
| description | string | The descriptive text for the component |
| disabled | boolean | The component will display as unusable |
| dismissible | boolean | The component will display a close button which will hide the component when clicked |
| expandable | boolean | The component will have an expandable state |
| expanded | boolean | The component will display in the expanded state |
| fullWidth | boolean | The component will take up the available width |
| groupLabel/groupTitle | string | The title text for a component's overarching group |
| heading | string | The title text for the component |
| helperText | string | The informative text for the component |
| hideLabel | boolean | Sets the visibility for the component's label |
| href | string | The URL for the component |
| label | string | Text within the component |
| loading | boolean | The component will display in a loading state |
| message | string | The body text for the component |
| name | string | The name for the component |
| open | boolean | The component will display in an open state |
| placeholder | string | The placeholder text for the component |
| progress | number | The progress made within the component |
| readonly | boolean | The component will display in a readonly state |
| required | boolean | The component will display as a required field |
| selected | boolean | The selected state of the component |
| shortAppTitle | string | The shorter variation of the title text for the component |
| size | "default", "small", "large" | The size of the component |
| subheading | string | The subtitle text for the component |
| transparentBackground | boolean | Determines whether the component displays with a white background or transparent background |
| type | Varies depending on the component | The type of the component. This can affect either how the component looks (e.g. circular or linear) or how the component functions (e.g. simple or complex) |
| validationStatus | "warning", "error", "success" | The status of the validation message within the component |
| validationText | string | The text of the validation message within the component |
| value | string | The value for the component |
| variant | Varies depending on the component | The variation of the component. This can affect either the styling of the component (e.g. the status colour) or how the component looks (e.g. rectangle or circle) |
| Slot name | Expected content | Description |
|---|---|---|
| action(s) | buttons/links | Additional interactive elements to the component |
| additional-field | inputs | Additional input field for checkbox/radio components |
| app-title | typography/links | The title text for the component |
| badge | badge | A badge component appears alongside the component |
| buttons | buttons | Additional buttons for the component |
| heading | typography/links | The title text for the component |
| icon | image/icon | Additional icon for the component |
| label | typography/links | Text within the component |
| message | typography/links | The body text for the component |
| navigation | navigation items | The content rendered in the navigation panel of the component |
| router-item | router items/links | Handle routing by nesting routes in the component |
| subheading | typography/links | The subtitle text for the component |