TextButton

<Arrange gap="xsmall">
  <TextButton size="small" icon={<SvgAdd />}>Small</TextButton>
  <TextButton icon={<SvgAdd />}>Medium</TextButton>
  <TextButton size="large" icon={<SvgAdd />}>Large</TextButton>
</Arrange>

<Arrange gap="xsmall">
  <TextButton icon={<SvgShare />}>Share</TextButton>
  <TextButton icon={<SvgAdd />}>New Item</TextButton>
  <TextButton icon={<SvgSearch />}>Search</TextButton>
</Arrange>

<Arrange gap="xsmall">
  <TextButton iconPosition="left" icon={<SvgArrowLeft />}>Left</TextButton>
  <TextButton iconPosition="right" icon={<SvgArrowRight />}>Right</TextButton>
</Arrange>

<Arrange gap="xsmall">
  <TextButton>Open</TextButton>
  <TextButton>Archive</TextButton>
  <TextButton>Delete</TextButton>
</Arrange>

<Arrange gap="medium" justifyContent="space-between">
  <Container borderSide="left" borderColor="red" borderWidth="2px">
    <Arrange gap="xsmall">
      <TextButton offsetSide="left">Archive</TextButton>
      <TextButton>Delete</TextButton>
    </Arrange>
    <Container maxWidth="40ch" paddingY="small">
      {demoText.medium}
    </Container>
    <TextButton offsetSide="left" icon={<SvgFolder />}>Save</TextButton>
  </Container>
  <Container borderSide="right" borderColor="red" borderWidth="2px">
    <Arrange gap="xsmall" justifyContent="end">
      <TextButton>Archive</TextButton>
      <TextButton offsetSide="right">Delete</TextButton>
    </Arrange>
    <Container maxWidth="40ch" paddingY="small">
      <Text alignment="right">
        {demoText.medium}
      </Text>
    </Container>
    <Arrange justifyContent="end">
      <TextButton offsetSide="right" icon={<SvgFolder />}>Save</TextButton>
    </Arrange>
  </Container>
</Arrange>

<TextButton isActive icon={<SvgAdd />}>
  New Item
</TextButton>

<TextButton isDisabled icon={<SvgAdd />}>
  New Item
</TextButton>

() => {
    const ref = useRef(null)
    const onClick = () => ref.current.focus()
    return (
      <>
        <Spacer bottom="small">
          <TextButton ref={ref} icon={<SvgAdd />}>
            New Item
          </TextButton>
        </Spacer>
        <TextButton onClick={onClick}>Click to focus</TextButton>
      </>
    )
  }