Last modified: August 22, 2025
Use Table components to render tables in app cards for displaying sets of data. Tables can be useful for when your app card needs to display a set of raw data that is too detailed or complicated to be described with text only, or when a user needs to compare sets of data.
Follow the design patterns below to keep your app card consistent with HubSpot’s designs. To learn more about implementation, check out the Table component reference documentation.
Patterns
Buttons
A row should only contain a button if there’s an action directly associated with the row. If needed, use the
xs button size and secondary variant. Keep table row buttons right-aligned to the information they are relevant to, enabling the user to read the information from left to right, then decide to take action.Content
Don’t overwhelm users with too much information. Long form content should instead be contained in a
Panel that can be opened from the row to prevent information from crowding the table itself.Example
The example below is taken from HubSpot’s design patterns example app and Figma design kit.
View code on GitHub