feat: Add StudioTag and StudioBetaTag

frontend/libs/studio-components/src/components/StudioBetaTag/StudioBetaTag.stories.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import type { Meta, StoryFn } from '@storybook/react';
+import { StudioBetaTag } from './StudioBetaTag';
+
+type Story = StoryFn<typeof StudioBetaTag>;
+
+const meta: Meta = {
+  title: 'Components/StudioBetaTag',
+  component: StudioBetaTag,
+  argTypes: {
+    size: {
+      control: 'radio',
+      options: ['sm', 'md', 'lg'],
+    },
+  },
+};
+
+export const Preview: Story = (args): React.ReactElement => <StudioBetaTag {...args} />;
+
+Preview.args = {
+  size: 'sm',
+};
+
+export default meta;

frontend/libs/studio-components/src/components/StudioBetaTag/StudioBetaTag.test.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { StudioBetaTag, type StudioBetaTagProps } from './StudioBetaTag';
+import { testRootClassNameAppending } from '../../test-utils/testRootClassNameAppending';
+
+describe('StudioBetaTag', () => {
+  it('should render the "Beta" text', () => {
+    renderStudioBetaTag();
+    expect(screen.getByText('Beta')).toBeInTheDocument();
+  });
+
+  it('Appends given classname to the component', () => {
+    testRootClassNameAppending((className) => renderStudioBetaTag({ className }));
+  });
+});
+
+const renderStudioBetaTag = (props: Partial<StudioBetaTagProps> = {}) => {
+  return render(<StudioBetaTag {...props} />);
+};

frontend/libs/studio-components/src/components/StudioBetaTag/StudioBetaTag.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { StudioTag, type StudioTagProps } from '../StudioTag';
+
+export type StudioBetaTagProps = Omit<StudioTagProps, 'color' | 'children'>;
+
+export const StudioBetaTag = ({ size = 'sm', ...rest }: StudioBetaTagProps) => {
+  return (
+    <StudioTag color='info' size={size} {...rest}>
+      Beta
+    </StudioTag>
+  );
+};

frontend/libs/studio-components/src/components/StudioBetaTag/index.ts

@@ -0,0 +1 @@
+export { StudioBetaTag, type StudioBetaTagProps } from './StudioBetaTag';

frontend/libs/studio-components/src/components/StudioTag/index.tsx

@@ -0,0 +1 @@
+export { Tag as StudioTag, type TagProps as StudioTagProps } from '@digdir/designsystemet-react';

frontend/libs/studio-components/src/components/index.ts

@@ -1,4 +1,5 @@
 export * from './StudioAnimateHeight';
+export * from './StudioBetaTag';
 export * from './StudioBlobDownloader';
 export * from './StudioBooleanToggleGroup';
 export * from './StudioButton';
@@ -35,6 +36,7 @@ export * from './StudioCombobox';
 export * from './StudioTableLocalPagination';
 export * from './StudioTableRemotePagination';
 export * from './StudioTabs';
+export * from './StudioTag';
 export * from './StudioTextarea';
 export * from './StudioTextfield';
 export * from './StudioToggleableTextfield';